增加获取importModules方法及loadModule后的moduleInfo by xiazhiqiang · Pull Request #469 · ice-lab/icestark

xiazhiqiang · 2021-12-05T04:17:41Z

在微模块umd包除了mount、unmount和default外，还有其他方法。所以需要获取已经加载的模块信息及loadModule信息。

maoxiaoke · 2021-12-06T09:02:54Z

packages/icestark-module/src/modules.tsx

    mount,
    unmount,
    component,
+    moduleInfo,


这里返回的产物需要在哪里消费？

在加载微模块后，需要获取已加载的模块中对应的方法。通过获取到微模块的方法，用来定制业务中的方法，从而实现方法的定制扩展。

也就是說，getImportModules 並不消費

此处可以有2种方式，如果loadModule不增加返回moduleInfo，await loadModule后通过getImportModule获取已加载的模块信息，如果有返回，则读取返回值。2中方式都是读取的方式。

这样的话，是不是提供一种消费场景就足够了？

需要2中方式的。loadModule每次调用会渲染css。对于微模块配置了url: ['xxx.js', 'yyy.css']，js中有default模块及暴露的其他方法实现。这种首次加载模块后渲染模块没问题。但如果需要基于已加载的模块中调用方法，就不需要重新渲染样式了，直接读取importModule中的已加载的模块信息去调用对应的方法即可。也就是先判断importModule有没有，如果有已加载的模块信息，则直接调用，如果没有再调用loadModule方法。

用法是 moduleA.moduleInfo.自定义方法？

是的，跟目前的设计不冲突（目前mount和unmount用的是umd包里面的mount和unmount方法，component参数用的是umd暴露的default方法）。业务拿到moduleInfo后回去调用自定义方法判断的。

这里建议根据 rfc 修改下，

{
component,
...moduleInfo,
mount,
unmount,
}

maoxiaoke · 2021-12-06T09:04:45Z

packages/icestark-module/src/modules.tsx

+export const getImportModules = function (name: string = '') {
+  return name ? importModules[name] || {} : importModules;
+};
+


一个方法两用，函数命名和实现不一致。建议分成两个方法实现

好的，这个可拆成2个函数，一个是getImportModules，一个是getImportModuleByName

getImportedModule

getAllImportedModules

不会更好一些？

wisdomofgod · 2021-12-07T08:41:35Z

邮件已收到~~

maoxiaoke · 2021-12-09T12:56:22Z

需求简单整理下

背景

目前根据规范，模块默认导出 Component、mount 、unmount 方法，此外模块还可能暴露其他能力。目前，我们可以通过 store 来处理。比如，模块注册方法：

import { store } from '@ice/stark-data';

store.set('method1', () => { })

应用消费 store 数据：

const method1 = store.get('methods')
method1(1);

这个方案存在的问题：

通用性不强（需要额外的 @ice/stark-data）
对存在方法的判断较为复杂

用法

方式一：

const { 
  mount,
  unmount,
  Component,
  method1  // 自定义方法
} = loadModule({
    name: 'moduleName',
    url: 'https://localhost/module.js',
})

方式二：

import { getImportedModule } from '@ice/stark-module'

loadModule({
    name: 'moduleName',
    url: 'https://localhost/module.js',
})

const {  moduleInfo: { method1 } } = getImportedModule('moduleName')

xiazhiqiang · 2021-12-09T14:06:52Z

store 方案本身没问题。store方案我认为主要是共享不同应用的数据、触发/响应公共事件及回调，通过store也能实现。
我们这里面向isv的扩展开发，需要isv针对业务中的指定的模块或方法做自定义扩展。本身模块里面导出了方法定义，可以不用再额外用start/data去注册增加理解成本。
方法一写错了，应该是
const { mount, unmount, component, moduleInfo, // 里面包含自定义方法 } = loadModule({ name: 'moduleName', url: ['https://localhost/module.js','https://localhost/module.css'] })

maoxiaoke · 2021-12-09T15:05:58Z

store 方案本身没问题。store方案我认为主要是共享不同应用的数据、触发/响应公共事件及回调，通过store也能实现。我们这里面向isv的扩展开发，需要isv针对业务中的指定的模块或方法做自定义扩展。本身模块里面导出了方法定义，可以不用再额外用start/data去注册增加理解成本。方法一写错了，应该是 const { mount, unmount, component, moduleInfo, // 里面包含自定义方法 } = loadModule({ name: 'moduleName', url: ['https://localhost/module.js','https://localhost/module.css'] })

我认为 moduleInfo 内也包含了 mount、unmount 的内容，从 loadModule 这个方法的行为来看，其实是加载模块返回的信息，额外存在 moduleInfo 在含义上非常奇怪

xiazhiqiang · 2021-12-09T16:04:01Z

store 方案本身没问题。store方案我认为主要是共享不同应用的数据、触发/响应公共事件及回调，通过store也能实现。我们这里面向isv的扩展开发，需要isv针对业务中的指定的模块或方法做自定义扩展。本身模块里面导出了方法定义，可以不用再额外用start/data去注册增加理解成本。方法一写错了，应该是 const { mount, unmount, component, moduleInfo, // 里面包含自定义方法 } = loadModule({ name: 'moduleName', url: ['https://localhost/module.js','https://localhost/module.css'] })

我认为 moduleInfo 内也包含了 mount、unmount 的内容，从 loadModule 这个方法的行为来看，其实是加载模块返回的信息，额外存在 moduleInfo 在含义上非常奇怪

这个确实有点。moduleInfo中确实包含mount和unmount和default。但是为了isv写的方法不影响loadModule的实现，所以直接把moduleInfo返回了，而没有将moduleInfo剔除default、mount和unmount方法后的其他属性值打平作为loadModule的返回。个人觉得loadModule可以不感知这些。看你们的理解了。

maoxiaoke · 2021-12-10T02:28:39Z

store 方案本身没问题。store方案我认为主要是共享不同应用的数据、触发/响应公共事件及回调，通过store也能实现。我们这里面向isv的扩展开发，需要isv针对业务中的指定的模块或方法做自定义扩展。本身模块里面导出了方法定义，可以不用再额外用start/data去注册增加理解成本。方法一写错了，应该是 const { mount, unmount, component, moduleInfo, // 里面包含自定义方法 } = loadModule({ name: 'moduleName', url: ['https://localhost/module.js','https://localhost/module.css'] })

我认为 moduleInfo 内也包含了 mount、unmount 的内容，从 loadModule 这个方法的行为来看，其实是加载模块返回的信息，额外存在 moduleInfo 在含义上非常奇怪

这个确实有点。moduleInfo中确实包含mount和unmount和default。但是为了isv写的方法不影响loadModule的实现，所以直接把moduleInfo返回了，而没有将moduleInfo剔除default、mount和unmount方法后的其他属性值打平作为loadModule的返回。个人觉得loadModule可以不感知这些。看你们的理解了。

从目前的函数方法来理解，不建议增加一个 moduleInfo 判断，直接返回就可以了

maoxiaoke · 2021-12-10T02:36:52Z

packages/icestark-module/src/modules.tsx

+ * get import module by name
+ */
+export const getImportedModule = function(name: string = '') {
+  return name ? importModules[name] : {};


如果 importModules[name] 不存在，跟没传入 name 的时候返回不一样。建议：

if (typeof name !== 'string') { console.error(`[icestark-module]: should be string, but get ${typeof name}`) return; } return importModules[name];

maoxiaoke · 2021-12-10T02:37:59Z

packages/icestark-module/src/modules.tsx

    mount,
    unmount,
    component,
+    moduleInfo,


这里建议根据 rfc 修改下，

{
component,
...moduleInfo,
mount,
unmount,
}

* 增加获取importModules方法及loadModule后的moduleInfo (#469) Co-authored-by: xiazhiqiang <xiazhiqiangcuc@126.com> * chore: 🤖 improve DX by docs (#476)

增加获取importModules方法及loadModule后的moduleInfo

b487904

maoxiaoke reviewed Dec 6, 2021

View reviewed changes

拆分getImportModule

30e549d

maoxiaoke requested a review from ClarkXia December 8, 2021 03:08

Merge branch 'master' into master

4e2579a

maoxiaoke mentioned this pull request Dec 9, 2021

release: 2.7.1 #484

Merged

2 tasks

maoxiaoke changed the base branch from master to release/2.7.1 December 9, 2021 09:13

xiazhiqiang added 2 commits December 9, 2021 17:46

修改方法名

dfece2b

Merge branch 'master' of https://github.com/xiazhiqiang/icestark

53a14ee

maoxiaoke reviewed Dec 10, 2021

View reviewed changes

修改参数及增加提示

1c92d46

maoxiaoke merged commit 690b9f2 into ice-lab:release/2.7.1 Dec 10, 2021

maoxiaoke added a commit that referenced this pull request Dec 23, 2021

release: 2.7.1 (#484)

76fa893

* 增加获取importModules方法及loadModule后的moduleInfo (#469) Co-authored-by: xiazhiqiang <xiazhiqiangcuc@126.com> * chore: 🤖 improve DX by docs (#476)

Conversation

xiazhiqiang commented Dec 5, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maoxiaoke Dec 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maoxiaoke Dec 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wisdomofgod commented Dec 7, 2021 via email

Uh oh!

maoxiaoke commented Dec 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

背景

用法

Uh oh!

xiazhiqiang commented Dec 9, 2021

Uh oh!

maoxiaoke commented Dec 9, 2021

Uh oh!

xiazhiqiang commented Dec 9, 2021

Uh oh!

maoxiaoke commented Dec 10, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maoxiaoke Dec 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maoxiaoke Dec 10, 2021 •

edited

Loading

maoxiaoke Dec 9, 2021 •

edited

Loading

maoxiaoke commented Dec 9, 2021 •

edited

Loading

maoxiaoke Dec 10, 2021 •

edited

Loading