feat: nocode plugin support style-lodaer & butter registry (#839)

Co-authored-by: targeral <[email protected]>

Author: lastIndexOf

Diff for: .changeset/unlucky-experts-deliver.md

@@ -0,0 +1,5 @@
+---
+'@modern-js/plugin-nocode': patch
+---
+
+nocode plugin support style-loader

Diff for: packages/cli/plugin-nocode/package.json

@@ -60,6 +60,7 @@
     "semver": "^7.3.5",
     "signale": "^1.4.0",
     "slash": "^3.0.0",
+    "style-loader": "^3.3.1",
     "uuid": "^8.3.2",
     "webpack": "^5.65.0",
     "webpack-sources": "^3.2.2"

Diff for: packages/cli/plugin-nocode/src/cli.ts

@@ -1,15 +1,30 @@
-import { PLUGIN_SCHEMAS } from '@modern-js/utils';
+import { join } from 'path';
+import { Import, PLUGIN_SCHEMAS } from '@modern-js/utils';
 import { WebpackConfigTarget, getWebpackConfig } from '@modern-js/webpack';
 import type { Configuration } from 'webpack';
-import type { CliPlugin } from '@modern-js/core';
+import { MODE, STARRY_MODEL_RUNTIME } from './contants';
 import dev from './dev';
 import { register } from './register';
 
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
 process.env.RUN_PLATFORM = 'true';
 
-export default (): CliPlugin => ({
-  name: '@modern-js/plugin-nocode',
-  setup: api => ({
+const getMode = (appDirectory: string) => {
+  let mode = MODE.BLOCK;
+  try {
+    const { dependencies } = require(join(appDirectory, 'package.json'));
+    if (STARRY_MODEL_RUNTIME in dependencies) {
+      mode = MODE.MODEL;
+    }
+  } catch (err) {}
+  return mode;
+};
+
+export default core.createPlugin(
+  () => ({
     commands({ program }) {
       program
         .command('deploy [subcmd]')
@@ -26,8 +41,8 @@ export default (): CliPlugin => ({
         });
 
       const devCommand = program.commandsMap.get('dev');
-      const { appDirectory, internalDirectory } = api.useAppContext();
-      const modernConfig = api.useResolvedConfigContext();
+      const { appDirectory, internalDirectory } = core.useAppContext();
+      const modernConfig = core.useResolvedConfigContext();
       if (devCommand) {
         devCommand.command('nocode').action(async () => {
           const webpackConfig = getWebpackConfig(
@@ -38,14 +53,15 @@ export default (): CliPlugin => ({
             internalDirectory,
             webpackConfig,
             modernConfig,
+            getMode(appDirectory),
           );
         });
       }
     },
     validateSchema() {
       return PLUGIN_SCHEMAS['@modern-js/plugin-nocode'];
     },
-    platformBuild() {
+    platformBuild({ isTsProject: _ }) {
       return {
         name: 'nocode',
         title: 'Run Nocode log',
@@ -62,8 +78,8 @@ export default (): CliPlugin => ({
         }: {
           isTsProject: boolean;
         }) => {
-          const { appDirectory, internalDirectory } = api.useAppContext();
-          const modernConfig = api.useResolvedConfigContext();
+          const { appDirectory, internalDirectory } = core.useAppContext();
+          const modernConfig = core.useResolvedConfigContext();
           const webpackConfig = getWebpackConfig(
             WebpackConfigTarget.CLIENT,
           ) as Configuration;
@@ -72,9 +88,11 @@ export default (): CliPlugin => ({
             internalDirectory,
             webpackConfig,
             modernConfig,
+            getMode(appDirectory),
           );
         },
       };
     },
   }),
-});
+  { name: '@modern-js/plugin-nocode' },
+) as any;

Diff for: packages/cli/plugin-nocode/src/compiler/index.ts

@@ -1,5 +1,9 @@
 import * as path from 'path';
-import type { Configuration, WebpackPluginInstance } from 'webpack';
+import type {
+  Configuration,
+  RuleSetRule,
+  WebpackPluginInstance,
+} from 'webpack';
 import { fs, logger } from '@modern-js/utils';
 import webpack from 'webpack';
 import { EDITOR_ENTRY, DEFAULT_ENTRY, MODE } from '../contants';
@@ -16,21 +20,18 @@ const getEntryFile = (prefix: string) => {
   return prefix;
 };
 
-const compile = async (
+export const handleWebpackConfig = (
   webpackConfig: Configuration,
   {
     umdEntryFile,
-    editorEntryFile,
     appDirectory,
     isDev,
   }: {
     appDirectory: string;
     umdEntryFile: string;
-    editorEntryFile: string;
     isDev: boolean;
   },
 ) => {
-  logger.info('compile UMD entry', umdEntryFile);
   webpackConfig.externals = [
     'react',
     'react/jsx-runtime',
@@ -41,6 +42,9 @@ const compile = async (
     '@modern-js-reduck/react',
     '@modern-js-reduck/store',
     '@modern-js-block/runtime',
+    '@modern-js-model/runtime',
+    // 星夜区块单独发布的 reduck 版本
+    '@modern-js-model/reduck-core',
     '@modern-js/runtime',
     '@modern-js/runtime-core',
     '@modern-js/plugin-router',
@@ -100,6 +104,29 @@ const compile = async (
   webpackConfig.plugins = webpackConfig.plugins.filter(
     p => p.constructor.name !== 'HtmlWebpackPlugin',
   );
+  (webpackConfig?.module?.rules as RuleSetRule[])?.[1]?.oneOf?.forEach(rule => {
+    if (
+      Array.isArray(rule.use) &&
+      typeof rule.use[0] === 'object' &&
+      (rule.use[0]?.loader || '').includes('mini-css-extract-plugin')
+    ) {
+      rule.use[0].loader = 'style-loader';
+    }
+  });
+};
+
+const compile = async (
+  webpackConfig: Configuration,
+  options: {
+    appDirectory: string;
+    umdEntryFile: string;
+    editorEntryFile: string;
+    isDev: boolean;
+  },
+) => {
+  const { umdEntryFile, editorEntryFile, isDev } = options;
+  logger.info('compile UMD entry', umdEntryFile);
+  handleWebpackConfig(webpackConfig, options);
   await build(webpackConfig, { editorEntryFile, isDev });
 };
 

Diff for: packages/cli/plugin-nocode/src/contants.ts

@@ -5,3 +5,6 @@ export const MODE = {
   MODEL: 'MODEL',
   BLOCK: 'BLOCK',
 };
+
+export const STARRY_BLOCK_RUNTIME = '@modern-js-block/runtime';
+export const STARRY_MODEL_RUNTIME = '@modern-js-model/runtime';

Diff for: packages/cli/plugin-nocode/src/register/butter-auth.ts

@@ -35,15 +35,18 @@ const checkLoggedIn = async (token: any) => {
   return res.data.isLogin;
 };
 
-const checkAuth = async (token: any) => {
+const checkAuth = async (token: string) => {
   const isLoggedIn = await checkLoggedIn(token);
   if (!isLoggedIn) {
     throw new Error('not logged in yet');
   }
   return token;
 };
 
-const waitForAuth = async (token: any, time = 0) => {
+const waitForAuth: (token: string, time?: number) => Promise<string> = async (
+  token: string,
+  time = 0,
+) => {
   await delay(AUTH_WAIT_INTERVAL);
 
   if (time >= AUTH_WAIT_COUNT) {
@@ -53,7 +56,6 @@ const waitForAuth = async (token: any, time = 0) => {
   try {
     return await checkAuth(token);
   } catch (err) {
-    // eslint-disable-next-line @typescript-eslint/return-await
     return await waitForAuth(token, time + 1);
   }
 };
@@ -91,7 +93,7 @@ const readLocalConfig = async () => {
   return data;
 };
 
-const writeLocalConfig = async data =>
+const writeLocalConfig = async (data: any) =>
   fs.writeJson(BUTTER_CONFIG, data, { spaces: 2 });
 
 const readLocalToken = async () => {

Diff for: packages/cli/plugin-nocode/src/register/env.ts

@@ -14,7 +14,7 @@ const SERVICE_ID = isStaging ? STG_SERVICE_ID : PROD_SERVICE_ID;
 // if (isLocalDebug) {
 //   BUTTER_HOST = 'http://localhost:3000';
 // }
-const BUTTER_HOST = `https://butter.bytedance.com`;
+const BUTTER_HOST = process.env.BUTTER_HOST || `https://butter.bytedance.com`;
 
 const BUTTER_REGISTER_ENDPOINT = `${BUTTER_HOST}/api/v2/register`;
 const BUTTER_UNREGISTER_ENDPOINT = `${BUTTER_HOST}/api/v2/unregister`;
@@ -28,6 +28,7 @@ const BUTTER_TYPE_ROUTE_MAP = {
   PLUGIN: 'plugins',
   PRESET: 'presets',
   BLOCK: 'components',
+  MODEL: 'models',
 };
 
 export {

Diff for: packages/cli/plugin-nocode/tests/handleWebpackConfig.test.ts

@@ -0,0 +1,66 @@
+import path from 'path';
+import { BaseWebpackConfig } from '@modern-js/webpack';
+import { defaultsConfig, IAppContext } from '@modern-js/core';
+import { RuleSetRule } from 'webpack';
+import { handleWebpackConfig } from '../src/compiler';
+
+export const userConfig: any = {
+  ...defaultsConfig,
+};
+
+const fixtures = path.resolve(__dirname, './');
+const appContext = {
+  appDirectory: fixtures,
+  internalDirectory: '/node_modules/.modern-js',
+  srcDirectory: '/src',
+  sharedDirectory: './shared',
+  entrypoints: [
+    {
+      entryName: 'page-a',
+      entry: path.resolve(fixtures, './demo/src/page-a/index.jsx'),
+    },
+  ],
+  internalDirAlias: '@_modern_js_internal',
+  internalSrcAlias: '@_modern_js_src',
+};
+
+describe('plugin-nocode', () => {
+  it('expect add style-loader to webpack config in nocode plugin', () => {
+    try {
+      userConfig._raw = userConfig;
+      userConfig.source.include = ['query-string'];
+      const config = new BaseWebpackConfig(
+        appContext as IAppContext,
+        userConfig,
+      ).config();
+
+      const hasStyleLoader = config?.module?.rules?.[1]?.oneOf.findIndex(
+        (rule: RuleSetRule) => {
+          return (
+            Array.isArray(rule.use) &&
+            typeof rule.use[0] === 'object' &&
+            rule?.use?.[0]?.loader === 'style-loader'
+          );
+        },
+      );
+      expect(hasStyleLoader).toBeLessThan(0);
+      handleWebpackConfig(config, {
+        isDev: true,
+        appDirectory: appContext.appDirectory,
+        umdEntryFile: './',
+      });
+
+      const hasStyleLoaderAfterHandled =
+        config?.module?.rules?.[1]?.oneOf.findIndex((rule: RuleSetRule) => {
+          return (
+            Array.isArray(rule.use) &&
+            typeof rule.use[0] === 'object' &&
+            rule.use[0].loader === 'style-loader'
+          );
+        });
+      expect(hasStyleLoaderAfterHandled).toBeGreaterThanOrEqual(0);
+    } catch (e) {
+      console.error(e);
+    }
+  });
+});