feat: add vitest for plugin test

package.json

@@ -11,7 +11,8 @@
     "start:node": "cd src/node && tsc -w",
     "dev:playground": "node ./bin/island playground",
     "build:playground": "node ./bin/island build playground",
-    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx --quiet ./"
+    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx --quiet ./",
+    "test": "vitest run"
   },
   "keywords": [],
   "author": "",
@@ -81,6 +82,7 @@
     "typescript": "^4.7.4",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.1",
-    "vite-plugin-inspect": "^0.6.1"
+    "vite-plugin-inspect": "^0.6.1",
+    "vitest": "^0.23.1"
   }
 }

src/client/app/client-entry.tsx

@@ -1,6 +1,6 @@
 import { hydrateRoot, createRoot } from 'react-dom/client';
-import React, { createElement } from 'react';
-import { BrowserRouter, useLocation } from 'react-router-dom';
+import React, { ComponentType, createElement } from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import './sideEffects';
 import { DataContext } from './hooks';
 

src/node/__tests__/babel-plugin-island.test.ts

@@ -0,0 +1,48 @@
+import { expect, describe, test } from 'vitest';
+import { transformAsync, TransformOptions } from '@babel/core';
+import babelPluginIsland from '../babel-plugin-island';
+import { MASK_SPLITTER } from '../constants';
+
+describe('test babel-plugin-island', () => {
+  const ISLAND_PATH = '../Comp/index';
+  const IMPORTER_PATH = '/User/code/project/test.tsx';
+  const babelOptions: TransformOptions = {
+    filename: IMPORTER_PATH,
+    presets: ['@babel/preset-react'],
+    plugins: [babelPluginIsland]
+  };
+  test('Should compile jsx identifier', async () => {
+    const code = `import A from '${ISLAND_PATH}'; export default function App() { return <A __island>hello</A>; }`;
+    const result = await transformAsync(code, babelOptions);
+    expect(result?.code).toContain(
+      `__island: "${ISLAND_PATH}${MASK_SPLITTER}${IMPORTER_PATH}"`
+    );
+  });
+
+  test('Should compile jsx member expression', async () => {
+    const code = `import A from '${ISLAND_PATH}'; export default function App() { return <A.B __island>hello</A.B>; }`;
+    const result = await transformAsync(code, babelOptions);
+    expect(result?.code).toContain(
+      `__island: "${ISLAND_PATH}${MASK_SPLITTER}${IMPORTER_PATH}"`
+    );
+  });
+
+  test('Should compile jsx namespace expression', async () => {
+    const code = `import * as A from '${ISLAND_PATH}'; export default function App() { return <A __island>hello</A>; }`;
+    const result = await transformAsync(code, babelOptions);
+    expect(result?.code).toContain(
+      `__island: "${ISLAND_PATH}${MASK_SPLITTER}${IMPORTER_PATH}"`
+    );
+  });
+
+  test('Should do nothing', async () => {
+    const code = `import * as A from '${ISLAND_PATH}'; export default function App() { return <A>hello</A>; }`;
+    const result = await transformAsync(code, babelOptions);
+    expect(result?.code).toMatchInlineSnapshot(`
+      "import * as A from '../Comp/index';
+      export default function App() {
+        return /*#__PURE__*/React.createElement(A, null, \\"hello\\");
+      }"
+    `);
+  });
+});

src/node/babel-plugin-island.ts

@@ -15,27 +15,40 @@ import type { Visitor } from '@babel/traverse';
 import {} from 'vite';
 import { MASK_SPLITTER } from './constants';
 
-const TRACE_ID = '__island';
+const ID = '__island';
 
 export default declare((api) => {
   api.assertVersion(7);
 
   const visitor: Visitor<PluginPass> = {
     JSXOpeningElement(path, state) {
       const name = path.node.name;
-      if (name.type === 'JSXIdentifier') {
-        const binding = path.scope.getBinding(name.name);
-        if (binding?.path.parent.type === 'ImportDeclaration') {
-          const source = (binding?.path.parent as t.ImportDeclaration).source;
-          const attributes = (path.container as t.JSXElement).openingElement
-            .attributes;
-          for (let i = 0; i < attributes.length; i++) {
-            const name = (attributes[i] as t.JSXAttribute).name;
-            if (name?.name === TRACE_ID) {
-              (attributes[i] as t.JSXAttribute).value = t.stringLiteral(
-                `${source.value}${MASK_SPLITTER}${state.filename}`
-              );
-            }
+      let bindingName: string;
+      if (t.isJSXIdentifier(name)) {
+        bindingName = name.name;
+      } else if (t.isJSXMemberExpression(name)) {
+        let object = name.object;
+        while (t.isJSXMemberExpression(object)) {
+          object = object.object;
+        }
+        bindingName = object.name;
+      } else if (t.isJSXNamespacedName(name)) {
+        bindingName = name.namespace.name;
+      } else {
+        return;
+      }
+
+      const binding = path.scope.getBinding(bindingName);
+      if (binding?.path.parent.type === 'ImportDeclaration') {
+        const source = (binding?.path.parent as t.ImportDeclaration).source;
+        const attributes = (path.container as t.JSXElement).openingElement
+          .attributes;
+        for (let i = 0; i < attributes.length; i++) {
+          const name = (attributes[i] as t.JSXAttribute).name;
+          if (name?.name === ID) {
+            (attributes[i] as t.JSXAttribute).value = t.stringLiteral(
+              `${source.value}${MASK_SPLITTER}${state.filename}`
+            );
           }
         }
       }

src/node/build/bundle.ts

@@ -1,4 +1,4 @@
-import { OutputBundle, RollupOutput } from 'rollup';
+import { RollupOutput } from 'rollup';
 import { build, InlineConfig } from 'vite';
 import { CLIENT_ENTRY_PATH, SERVER_ENTRY_PATH, TEMP_PATH } from '../constants';
 import { createIslandPlugins } from '../plugin';

src/node/build/render.ts

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import fs from 'fs-extra';
+import fs, { remove } from 'fs-extra';
 import type { RollupOutput } from 'rollup';
 import { dynamicImport } from '../utils';
 import { okMark, Builder } from './bundle';
@@ -125,5 +125,5 @@ export async function renderPages(
     symbol: okMark
   });
   // Render ended, remove temp files
-  // await remove(join(root, TEMP_PATH));
+  await remove(join(root, TEMP_PATH));
 }

src/node/plugin-island/index.ts

@@ -38,8 +38,7 @@ export function pluginIsland(
           alias: {
             'island:theme': `/@fs/${DEFAULT_THEME_PATH}`,
             'island:client': `/@fs/${CLIENT_PATH}`,
-            'island:routes': join(c.root!, ROUTE_PATH),
-            'island:islands': join(`/@fs/${THEME_ISLANDS_PATH}`)
+            'island:routes': join(c.root!, ROUTE_PATH)
           }
         },
         css: {