feat: modify remote component to remote module

web-infra-dev · Jul 3, 2021 · 0bcaa24 · 0bcaa24
1 parent b75c39f
commit 0bcaa24
Show file tree

Hide file tree

Showing 34 changed files with 280 additions and 288 deletions.
diff --git a/dev/react/linkdeps.js b/dev/react/linkdeps.js
@@ -7,7 +7,7 @@ const { exec } = require('child_process');
   '@garfish/browser-vm',
   '@garfish/core',
   '@garfish/loader',
-  '@garfish/remote-component',
+  '@garfish/remote-module',
 ].forEach((item) => {
   console.log(`link ${item}`);
   exec(`yarn link ${item}`, (error, stdout, stderr) => {

diff --git a/dev/react/public/index.html b/dev/react/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="garfish-remote-component" src="http://localhost:3000/remoteComponent.js">
+    <meta name="garfish-remote-module" src="http://localhost:3000/remoteComponent.js">
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/dev/react/src/App.js b/dev/react/src/App.js
@@ -1,9 +1,5 @@
 import React, { useState } from 'react';
-import {
-  toEsModule,
-  loadComponent,
-  loadComponentSync,
-} from '@garfish/remote-component';
+import { esModule, loadModule, loadModuleSync } from '@garfish/remote-module';
 import logo from './logo.svg';
 import './App.css';
 import { Modal, Button } from 'antd';
@@ -27,14 +23,14 @@ function App() {
     window.a.b.c = 1;
   };
 
-  const RemoteComponent = loadComponentSync(
+  const RemoteComponent = loadModuleSync(
     'http://localhost:3000/remoteComponent.js',
   ).One;
 
   const RemoteComponentTwo = React.lazy(() => {
-    return loadComponent(
-      'http://localhost:3000/remoteComponent.js',
-    ).then((cms) => toEsModule(cms.Two));
+    return loadModule('http://localhost:3000/remoteComponent.js').then((cms) =>
+      esModule(cms.Two),
+    );
   });
 
   return (

diff --git a/dev/react/src/index.js b/dev/react/src/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import { preload, setExternal } from '@garfish/remote-component';
+import { preload, setExternal } from '@garfish/remote-module';
 
 setExternal({ React });
 

diff --git a/dev/vue/linkdeps.js b/dev/vue/linkdeps.js
@@ -7,7 +7,7 @@ const { exec } = require('child_process');
   '@garfish/browser-vm',
   '@garfish/core',
   '@garfish/loader',
-  '@garfish/remote-component',
+  '@garfish/remote-module',
 ].forEach((item) => {
   console.log(`link ${item}`);
   exec(`yarn link ${item}`, (error, stdout, stderr) => {

diff --git a/packages/runtime/core/src/garfish.ts b/packages/runtime/core/src/garfish.ts
@@ -213,7 +213,7 @@ export class Garfish implements interfaces.Garfish {
       } else {
         try {
           let isHtmlMode, fakeEntryManager;
-          const resources = { js: [], link: [], components: [] }; // Default resources
+          const resources = { js: [], link: [], modules: [] }; // Default resources
           const { resourceManager: entryManager } = await this.loader.load(
             appName,
             transformUrl(location.href, appInfo.entry),
@@ -222,14 +222,14 @@ export class Garfish implements interfaces.Garfish {
           // Html entry
           if (entryManager instanceof TemplateManager) {
             isHtmlMode = true;
-            const [js, link, components] = await fetchStaticResources(
+            const [js, link, modules] = await fetchStaticResources(
               appName,
               this.loader,
               entryManager,
             );
             resources.js = js;
             resources.link = link;
-            resources.components = components;
+            resources.modules = modules;
           } else if (entryManager instanceof JavaScriptManager) {
             // Js entry
             isHtmlMode = false;

diff --git a/packages/runtime/core/src/interface/index.ts b/packages/runtime/core/src/interface/index.ts
@@ -3,8 +3,8 @@ import { SyncHook, AsyncSeriesBailHook } from '@garfish/hooks';
 import {
   Loader,
   StyleManager,
+  ModuleManager,
   TemplateManager,
-  ComponentManager,
   JavaScriptManager,
 } from '@garfish/loader';
 import { AppInterface } from '../module/app';
@@ -115,8 +115,8 @@ export namespace interfaces {
   }
 
   export interface StyleManagerInterface extends StyleManager {}
+  export interface ModuleManagerInterface extends ModuleManager {}
   export interface TemplateManagerInterface extends TemplateManager {}
-  export interface ComponentManagerInterface extends ComponentManager {}
   export interface JavaScriptManagerInterface extends JavaScriptManager {}
 
   export type Options = Config & HooksLifecycle;
@@ -129,7 +129,7 @@ export namespace interfaces {
   export interface ResourceModules {
     js: Array<JavaScriptManager>;
     link: Array<StyleManagerInterface>;
-    components: Array<ComponentManager>;
+    modules: Array<ModuleManager>;
   }
 
   export type BootStrapArgs = [Garfish, Options];

diff --git a/packages/runtime/core/src/module/app.ts b/packages/runtime/core/src/module/app.ts
@@ -92,7 +92,7 @@ export class App {
       currentApp: this,
       loader: context.loader,
       externals: context.externals,
-      remoteComponentsCode: resources.components,
+      remoteModulesCode: resources.modules,
     };
     this.cjsModules = {
       exports: {},

diff --git a/packages/runtime/core/src/plugins/preload.ts b/packages/runtime/core/src/plugins/preload.ts
@@ -1,7 +1,7 @@
 import {
   warn,
-  transformUrl,
   isAbsolute,
+  transformUrl,
   callTestCallback,
 } from '@garfish/utils';
 import { Loader, Manager, TemplateManager } from '@garfish/loader';
@@ -64,7 +64,7 @@ function safeLoad(
   loader: Loader,
   appName: string,
   url: string,
-  isComponent: boolean,
+  isModule: boolean,
   callback?: (m: Manager) => any,
 ) {
   requestQueue.add((next) => {
@@ -84,8 +84,8 @@ function safeLoad(
     // edge
     requestIdleCallback(() => {
       try {
-        if (isComponent) {
-          loader.loadComponent(url).then(success, throwWarn);
+        if (isModule) {
+          loader.loadModule(url).then(success, throwWarn);
         } else {
           loader.load(appName, url).then(success, throwWarn);
         }
@@ -126,7 +126,7 @@ export function loadAppResource(loader: Loader, info: interfaces.AppInfo) {
         }
         if (metaNodes) {
           metaNodes.forEach((node) => {
-            if (manager.DOMApis.isRemoteComponent(node)) {
+            if (manager.DOMApis.isRemoteModule(node)) {
               const src = manager.findAttributeValue(node, 'src');
               if (isAbsolute(src)) {
                 safeLoad(loader, info.name, src, true);

diff --git a/packages/runtime/core/src/utils.ts b/packages/runtime/core/src/utils.ts
@@ -114,11 +114,11 @@ export const fetchStaticResources = (
     entryManager
       .findAllMetaNodes()
       .map((node) => {
-        if (!entryManager.DOMApis.isRemoteComponent(node)) return;
+        if (!entryManager.DOMApis.isRemoteModule(node)) return;
         const async = entryManager.findAttributeValue(node, 'async');
         if (!isAsync(async)) {
           const src = entryManager.findAttributeValue(node, 'src');
-          return loader.loadComponent(src);
+          return loader.loadModule(src);
         }
       })
       .filter(Boolean),

diff --git a/packages/runtime/garfish/src/index.ts b/packages/runtime/garfish/src/index.ts
@@ -2,7 +2,7 @@ import { Garfish } from '@garfish/core';
 import GarfishRouter from '@garfish/router';
 import GarfishBrowserVm from '@garfish/browser-vm';
 import GarfishBrowserSnapshot from '@garfish/browser-snapshot';
-import { remoteComponentPlugin } from '@garfish/remote-component';
+import { GarfishRemoteModulePlugin } from '@garfish/remote-module';
 import {
   def,
   warn,
@@ -56,7 +56,7 @@ export function createContext(): Garfish {
       GarfishRouter(),
       GarfishBrowserVm(),
       GarfishBrowserSnapshot(),
-      remoteComponentPlugin(),
+      GarfishRemoteModulePlugin(),
     ],
   });
 

diff --git a/packages/runtime/loader/src/appCache.ts b/packages/runtime/loader/src/appCache.ts
@@ -5,17 +5,17 @@ export const cachedDataSet = new WeakSet();
 export enum FileTypes {
   js = 'js',
   css = 'css',
+  module = 'module',
   template = 'template',
-  component = 'component',
 }
 
 const MAX_SIZE = 10 * 1024 * 1024;
 const DEFAULT_POLL = Symbol('__defaultBufferPoll__');
 const FILE_TYPES = [
   FileTypes.js,
   FileTypes.css,
+  FileTypes.module,
   FileTypes.template,
-  FileTypes.component,
   DEFAULT_POLL,
 ];
 

diff --git a/packages/runtime/loader/src/index.ts b/packages/runtime/loader/src/index.ts
@@ -3,20 +3,20 @@ import { PluginManager } from './pluginSystem';
 import { request, copyResult, mergeConfig } from './utils';
 import { FileTypes, cachedDataSet, AppCacheContainer } from './appCache';
 import { StyleManager } from './managers/style';
+import { ModuleManager } from './managers/module';
 import { TemplateManager } from './managers/template';
-import { ComponentManager } from './managers/component';
 import { JavaScriptManager } from './managers/javascript';
 
 // Export types and manager constructor
 export * from './managers/style';
+export * from './managers/module';
 export * from './managers/template';
-export * from './managers/component';
 export * from './managers/javascript';
 
 export type Manager =
   | StyleManager
+  | ModuleManager
   | TemplateManager
-  | ComponentManager
   | JavaScriptManager;
 
 export interface LoaderOptions {
@@ -83,15 +83,15 @@ export class Loader {
     }
   }
 
-  loadComponent(url: string) {
-    return this.load<ComponentManager>('components', url, true);
+  loadModule(url: string) {
+    return this.load<ModuleManager>('modules', url, true);
   }
 
   // Unable to know the final data type, so through "generics"
   load<T extends Manager>(
     scope: string,
     url: string,
-    isComponent = false,
+    isModule = false,
   ): Promise<LoadedPluginArgs<T>['value']> {
     const { options, loadingList, cacheStore } = this;
 
@@ -133,9 +133,9 @@ export class Loader {
       .then(async ({ code, mimeType, result }) => {
         let managerCtor, fileType: FileTypes;
 
-        if (isComponent) {
-          fileType = FileTypes.component;
-          managerCtor = ComponentManager;
+        if (isModule) {
+          fileType = FileTypes.module;
+          managerCtor = ModuleManager;
         } else if (isHtml(mimeType) || /\.html/.test(result.url)) {
           fileType = FileTypes.template;
           managerCtor = TemplateManager;

diff --git a/packages/runtime/loader/src/managers/component.ts b/packages/runtime/loader/src/managers/component.ts
diff --git a/packages/runtime/loader/src/managers/module.ts b/packages/runtime/loader/src/managers/module.ts
@@ -0,0 +1,17 @@
+export class ModuleManager {
+  public moduleCode: string;
+  public url: string | null;
+
+  constructor(moduleCode: string, url?: string) {
+    this.url = url || null;
+    this.moduleCode = moduleCode;
+  }
+
+  clone() {
+    // @ts-ignore
+    const cloned = new this.constructor();
+    cloned.url = this.url;
+    cloned.moduleCode = this.moduleCode;
+    return cloned;
+  }
+}