feat: plugin jsx plus (#529)

* feat: create plugin jsx plus

* feat: add jsx plus plugin

* chore: dismiss all lint problems

* feat: add include and exclude

* docs: update docs of jsx plus

* fix: in case of auto lint fix

* fix: lint problem

* fix: compatible with node 14

* chore: update version

* chore: update pnpm lock

* fix: dev dep

Author: wssgcg1213

examples/rax-project/ice.config.mts

@@ -1,7 +1,11 @@
 import { defineConfig } from '@ice/app';
 import compatRax from '@ice/plugin-rax-compat';
+import jsxPlus from '@ice/plugin-jsx-plus';
 
 export default defineConfig({
   publicPath: '/',
-  plugins: [compatRax()],
+  plugins: [
+    compatRax(),
+    jsxPlus(),
+  ],
 });

examples/rax-project/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@ice/app": "workspace:*",
     "@ice/plugin-rax-compat": "workspace:*",
+    "@ice/plugin-jsx-plus": "workspace:*",
     "@ice/appear": "workspace:*",
     "@ice/runtime": "workspace:*",
     "rax": "^1.2.2",

examples/rax-project/src/pages/jsxplus.jsx

@@ -0,0 +1,25 @@
+import { createElement } from 'rax';
+
+export default function JSXPlusDemo() {
+  const list = [0, 1, 2, 3];
+  const val = 'foo';
+  return (
+    // x-class
+    <div x-class={{ item: true, active: val }}>
+      {/* x-if */}
+      <div x-if="YES">Should Show</div>
+      <div x-if={false}>Should Hide</div>
+
+      {/* x-for */}
+      {/* eslint-disable-next-line */}
+      <span x-for={item in list} key={item}> {item} </span>
+
+      {/* Fragment */}
+      <>
+        <div>Fragment 1</div>
+        <div>Fragment 2</div>
+        <div>Fragment 3</div>
+      </>
+    </div>
+  );
+}

examples/with-plugin-request/src/pages/home.tsx

@@ -8,6 +8,7 @@ export default function Home() {
 
   useEffect(() => {
     request();
+    // eslint-disable-next-line
   }, []);
 
   if (error) {

packages/plugin-jsx-plus/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+Initial implementation.

packages/plugin-jsx-plus/README.md

@@ -0,0 +1,35 @@
+# `plugin-jsx-plus`
+
+This plugin adds support for JSX+ syntax to the icejs 3.
+
+## Definition of JSX Plus
+https://github.com/jsx-plus/jsx-plus
+
+## Usage
+
+```js
+import { defineConfig } from '@ice/app';
+import jsxplus from '@ice/plugin-jsx-plus';
+
+export default defineConfig({
+  plugins: [
+    jsxplus({
+      // options
+    }),
+  ],
+});
+```
+
+## Options
+
+- `include`: `(string | RegExp)[]`
+  - Files to be included.
+  - Default: the project `src` directory.
+- `exclude`: `(string | RegExp)[]`
+  - Files to be excluded.
+  - Default: `[]`
+- `extensions`: `string[]`
+  - File extensions to be processed.
+  - Default: `['.jsx', '.tsx']`
+
+> If `include` and `exclude` are both set, `exclude` will be priority executed.

packages/plugin-jsx-plus/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@ice/plugin-jsx-plus",
+  "version": "1.0.0",
+  "description": "",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./esm/index.d.ts",
+      "import": "./esm/index.js",
+      "default": "./esm/index.js"
+    },
+    "./types": {
+      "types": "./esm/types.d.ts",
+      "import": "./esm/types.js",
+      "default": "./esm/types.js"
+    },
+    "./esm/types": {
+      "types": "./esm/types.d.ts",
+      "import": "./esm/types.js",
+      "default": "./esm/types.js"
+    }
+  },
+  "main": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "files": [
+    "esm",
+    "!esm/**/*.map"
+  ],
+  "devDependencies": {
+    "@ice/types": "^1.0.0",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6"
+  },
+  "repository": {
+    "type": "http",
+    "url": "https://github.com/ice-lab/ice-next/tree/master/packages/plugin-jsx-plus"
+  },
+  "scripts": {
+    "watch": "tsc -w",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@babel/core": "^7.19.1",
+    "babel-plugin-transform-jsx-class": "^0.1.3",
+    "babel-plugin-transform-jsx-condition": "^0.1.2",
+    "babel-plugin-transform-jsx-fragment": "^0.1.4",
+    "babel-plugin-transform-jsx-list": "^0.1.2",
+    "babel-plugin-transform-jsx-memo": "^0.1.4",
+    "babel-plugin-transform-jsx-slot": "^0.1.2",
+    "babel-runtime-jsx-plus": "^0.1.5"
+  }
+}

packages/plugin-jsx-plus/src/index.ts

@@ -0,0 +1,139 @@
+import path from 'path';
+import { createRequire } from 'module';
+import type { Plugin } from '@ice/types';
+import { transformSync } from '@babel/core';
+
+const require = createRequire(import.meta.url);
+const runtimePackage = 'babel-runtime-jsx-plus';
+const runtimePackagePath = require.resolve(runtimePackage);
+
+const babelPlugins = [
+  'babel-plugin-transform-jsx-list',
+  'babel-plugin-transform-jsx-condition',
+  'babel-plugin-transform-jsx-memo',
+  'babel-plugin-transform-jsx-slot',
+  ['babel-plugin-transform-jsx-fragment', { moduleName: 'react' }],
+  'babel-plugin-transform-jsx-class',
+];
+
+const babelTransformOptions = {
+  babelrc: false,
+  configFile: false,
+  parserOpts: {
+    sourceType: 'module',
+    allowAwaitOutsideFunction: true,
+    // ts syntax had already been transformed by swc plugin.
+    plugins: [
+      'jsx',
+      'importMeta',
+      'topLevelAwait',
+      'classProperties',
+      'classPrivateMethods',
+    ],
+    generatorOpts: {
+      decoratorsBeforeExport: true,
+    },
+  },
+  plugins: [],
+};
+
+babelPlugins.forEach((plugin) => {
+  if (typeof plugin === 'string') {
+    babelTransformOptions.plugins.push(require.resolve(plugin));
+  } else if (Array.isArray(plugin)) {
+    const pluginName = plugin[0] as string;
+    const pluginOption = plugin[1];
+    babelTransformOptions.plugins.push([require.resolve(pluginName), pluginOption]);
+  }
+});
+
+export function idFilter(options: JSXPlusOptions, id: string): boolean {
+  const extFilter = (id) => options.extensions.some((ext) => id.endsWith(ext));
+
+  if (options.exclude) {
+    for (const pattern of options.exclude) {
+      if (typeof pattern === 'string') {
+        if (id.indexOf(pattern) > -1) {
+          return false;
+        }
+      } else if (pattern instanceof RegExp && pattern.test(id)) {
+        return false;
+      }
+    }
+  }
+
+  if (options.include) {
+    for (const pattern of options.include) {
+      if (typeof pattern === 'string') {
+        if (id.indexOf(pattern) > -1) {
+          return extFilter(id);
+        }
+      } else if (pattern instanceof RegExp && pattern.test(id)) {
+        return extFilter(id);
+      }
+    }
+  }
+
+  return false;
+}
+
+export interface JSXPlusOptions {
+  include?: (string | RegExp)[];
+  exclude?: (string | RegExp)[];
+  extensions?: string[];
+}
+
+const plugin: Plugin<JSXPlusOptions> = (options: JSXPlusOptions = {}) => ({
+  name: '@ice/plugin-jsx-plus',
+  setup: ({ onGetConfig, context }) => {
+    // Default include all files in `src`.
+    if (!options.include) {
+      const sourceDir = path.join(context.rootDir, 'src');
+      options.include = [sourceDir];
+    }
+
+    // Default include all files with `.tsx` and `.jsx` extensions.
+    if (!options.extensions) {
+      options.extensions = ['.tsx', '.jsx'];
+    }
+
+    function jsxPlusTransformer(source, id) {
+      if (idFilter(options, id)) {
+        try {
+          const options = Object.assign({
+            filename: id,
+            sourceFileName: id,
+          }, babelTransformOptions);
+          if (/\.tsx?$/.test(id)) {
+            // When routes file is a typescript file, add ts parser plugins.
+            options.parserOpts.plugins.push('typescript');
+            options.parserOpts.plugins.push('decorators-legacy'); // allowing decorators by default
+          }
+
+          const { code, map } = transformSync(source, options);
+          return { code, map };
+        } catch (compileError) {
+          console.error(compileError);
+          return { code: source, map: null };
+        }
+      }
+      return { code: source, map: null };
+    }
+
+    onGetConfig((config) => {
+      // Add runtime alias.
+      if (!config.alias) {
+        config.alias = {};
+      }
+      config.alias[runtimePackage] = runtimePackagePath;
+
+      // Apply babel jsx plus transformer.
+      if (!config.transforms) {
+        config.transforms = [];
+      }
+      config.transforms.push(jsxPlusTransformer);
+    });
+  },
+});
+
+export default plugin;

packages/plugin-jsx-plus/src/types.ts

@@ -0,0 +1,85 @@
+import { expect, it, describe } from 'vitest';
+import { default as jsxPlus, idFilter } from '../src';
+
+describe('JSX Plus Plugin', () => {
+  describe('Id filter', () => {
+    it('default', () => {
+      expect(idFilter({}, '/bar/a.tsx')).toBeFalsy();
+    });
+
+    it('include', () => {
+      const options = {
+        include: [/bar/, 'foo'],
+        extensions: ['.jsx', '.tsx'],
+      };
+
+      expect(idFilter(options, '/bar/a.tsx')).toBeTruthy();
+      expect(idFilter(options, '/foo/a.tsx')).toBeTruthy();
+    });
+
+    it('exclude', () => {
+      expect(idFilter({
+        exclude: ['foo'],
+        include: [/bar/],
+        extensions: ['.jsx', '.tsx'],
+      }, '/foo/bar/a.tsx')).toBeFalsy();
+
+      expect(idFilter({
+        exclude: [/foo/],
+        include: [/bar/],
+        extensions: ['.jsx', '.tsx'],
+      }, '/foo/bar/a.tsx')).toBeFalsy();
+    });
+
+    it('extensions', () => {
+      const options = {
+        include: [/bar/],
+        extensions: ['.jsx', '.tsx', '.custom.ext'],
+      };
+      expect(idFilter(options, '/foo/bar/a.tsx.custom.ext')).toBeTruthy();
+    });
+  });
+
+  describe('Plugin', () => {
+    it('default', () => {
+      const plugin = jsxPlus({
+        include: ['foo'],
+      });
+      // @ts-ignore
+      expect(plugin.name).toBe('@ice/plugin-jsx-plus');
+      const fakeConfig = {};
+      function onGetConfig(fn) {
+        fn(fakeConfig);
+      }
+      const context = {
+        rootDir: '/foo/bar',
+      };
+      // @ts-ignore
+      plugin.setup({ onGetConfig, context });
+      expect(fakeConfig['alias']['babel-runtime-jsx-plus']).toBeDefined();
+      expect(Array.isArray(fakeConfig['transforms'])).toBeTruthy();
+      expect(fakeConfig['transforms'].length).toBe(1);
+    });
+
+    it('transformer', () => {
+      const plugin = jsxPlus({
+        include: ['foo'],
+      });
+      const fakeConfig = {};
+      function onGetConfig(fn) {
+        fn(fakeConfig);
+      }
+      const context = {
+        rootDir: '/foo/bar',
+      };
+      // @ts-ignore
+      plugin.setup({ onGetConfig, context });
+
+      const transformer = fakeConfig['transforms'][0];
+      const ret = transformer('<div x-if={false} />', '/foo/bar/a.tsx');
+      expect(ret.code).toBe(`import { createCondition as __create_condition__ } from "babel-runtime-jsx-plus";
+
+__create_condition__([[() => false, () => <div />]]);`);
+    });
+  });
+});