feat: support inline style for ssr (#518)

* feat: inline style for less * feat: classname to style * feat: esbuild inline style * feat: transform styles * fix: compat for less module * fix: less rule * feat: ignore * docs: ignore * refactor: to ts * test: inline-style * chore: update lock * fix: deps * refactor: enable esbuild inline style loader only in ssr * fix: validate for ignore plugins * refactor: to pure functions * feat: sync syntaxFeatures * fix: lint * Update rax-inline-style.test.ts
ice-lab · Sep 16, 2022 · 16e0afa · 16e0afa · vercel · Sep 16, 2022
1 parent 2d55abc
commit 16e0afa
Show file tree

Hide file tree

Showing 24 changed files with 3,768 additions and 1,477 deletions.
diff --git a/examples/rax-inline-style/.browserslistrc b/examples/rax-inline-style/.browserslistrc
@@ -0,0 +1 @@
+chrome 55
diff --git a/examples/rax-inline-style/ice.config.mts b/examples/rax-inline-style/ice.config.mts
@@ -0,0 +1,12 @@
+import { defineConfig } from '@ice/app';
+import compatRax from '@ice/plugin-rax-compat';
+
+export default defineConfig({
+  publicPath: '/',
+  plugins: [compatRax({
+    inlineStyle: true,
+  })],
+  server: {
+    bundle: true,
+  },
+});
diff --git a/examples/rax-inline-style/package.json b/examples/rax-inline-style/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "rax-project",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/plugin-rax-compat": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "rax": "^1.2.2",
+    "rax-image": "^2.4.1",
+    "rax-is-valid-element": "^1.0.0",
+    "rax-text": "^2.2.0",
+    "rax-view": "^2.3.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.2",
+    "webpack": "^5.73.0"
+  }
+}
diff --git a/examples/rax-inline-style/public/favicon.ico b/examples/rax-inline-style/public/favicon.ico
diff --git a/examples/rax-inline-style/src/app.tsx b/examples/rax-inline-style/src/app.tsx
@@ -0,0 +1,7 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig({
+  app: {
+    rootId: 'app',
+  },
+});
diff --git a/examples/rax-inline-style/src/components/Logo/index.jsx b/examples/rax-inline-style/src/components/Logo/index.jsx
@@ -0,0 +1,10 @@
+import { createElement } from 'rax';
+import Image from 'rax-image';
+
+import styles from './index.module.less';
+
+export default (props) => {
+  const { uri } = props;
+  const source = { uri };
+  return <Image className={styles['logo']} source={source} />;
+};
diff --git a/examples/rax-inline-style/src/components/Logo/index.module.less b/examples/rax-inline-style/src/components/Logo/index.module.less
@@ -0,0 +1,5 @@
+.logo {
+  width: 200rpx;
+  height: 180rpx;
+  margin-bottom: 20rpx;
+}
diff --git a/examples/rax-inline-style/src/components/Title/index.jsx b/examples/rax-inline-style/src/components/Title/index.jsx
@@ -0,0 +1,8 @@
+import { createElement } from 'rax';
+import Text from 'rax-text';
+
+import styles from './index.module.css';
+
+export default () => {
+  return <Text className={styles['title']}>Welcome to Your Rax App</Text>;
+};
diff --git a/examples/rax-inline-style/src/components/Title/index.module.css b/examples/rax-inline-style/src/components/Title/index.module.css
@@ -0,0 +1,5 @@
+.title {
+  font-size: 45rpx;
+  font-weight: bold;
+  margin: 20rpx 0;
+}
diff --git a/examples/rax-inline-style/src/document.tsx b/examples/rax-inline-style/src/document.tsx
@@ -0,0 +1,24 @@
+/* @jsx createElement */
+import { createElement } from 'rax';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE 3.0 Demo" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/rax-inline-style/src/global.css b/examples/rax-inline-style/src/global.css
@@ -0,0 +1,3 @@
+body {
+  font-size: 14px;
+}
diff --git a/examples/rax-inline-style/src/pages/index.css b/examples/rax-inline-style/src/pages/index.css
@@ -0,0 +1,19 @@
+.title {
+  color: red;
+  margin-left: 10rpx;
+}
+
+.data {
+  margin-top: 10px;
+}
+
+.homeContainer {
+  align-items: center;
+  margin-top: 200rpx;
+}
+
+.homeInfo {
+  font-size: 36rpx;
+  margin: 8rpx 0;
+  color: #555;
+}
diff --git a/examples/rax-inline-style/src/pages/index.jsx b/examples/rax-inline-style/src/pages/index.jsx
@@ -0,0 +1,30 @@
+import { createElement, useEffect, useRef } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Logo from '@/components/Logo';
+import Title from '@/components/Title';
+import './index.css';
+
+export default function Home() {
+  const ref = useRef();
+  useEffect(() => {
+    if (ref.current) {
+      console.log('ref for View', ref);
+    }
+  }, []);
+  return (
+    <View
+      ref={ref}
+      className="homeContainer"
+      style={{
+        width: '750rpx',
+      }}
+      onAppear={() => { console.log('view appear'); }}
+    >
+      <Logo uri="//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png" />
+      <Title />
+      <Text className="homeInfo">More information about Rax</Text>
+      <Text className="homeInfo">Visit https://rax.js.org</Text>
+    </View>
+  );
+}
diff --git a/examples/rax-inline-style/src/typings.d.ts b/examples/rax-inline-style/src/typings.d.ts
@@ -0,0 +1,14 @@
+declare module '*.module.less' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/examples/rax-inline-style/tsconfig.json b/examples/rax-inline-style/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["node_modules", "build", "public"]
+}
diff --git a/packages/ice/src/esbuild/ignore.ts b/packages/ice/src/esbuild/ignore.ts
@@ -0,0 +1,47 @@
+import type { Plugin, PluginBuild } from 'esbuild';
+
+interface IgnorePattern {
+  resourceRegExp: RegExp;
+  contextRegExp?: RegExp;
+}
+
+const igonrePlugin = (ignores: IgnorePattern[] = []): Plugin => {
+  return {
+    name: 'esbuild-ignore',
+    setup(build: PluginBuild) {
+      if (!Array.isArray(ignores)) {
+        return;
+      }
+
+      for (const ignorePattern of ignores) {
+        build.onResolve({ filter: ignorePattern.resourceRegExp }, args => {
+          if (ignorePattern.contextRegExp) {
+            if (args.resolveDir.match(ignorePattern.contextRegExp)) {
+              return {
+                path: args.path,
+                namespace: 'ignore',
+              };
+            } else {
+              return {
+                path: args.path,
+              };
+            }
+          }
+
+          return {
+            path: args.path,
+            namespace: 'ignore',
+          };
+        });
+      }
+
+      build.onLoad({ filter: /.*/, namespace: 'ignore' }, async () => {
+        return {
+          contents: '',
+        };
+      });
+    },
+  };
+};
+
+export default igonrePlugin;
diff --git a/packages/ice/src/service/serverCompiler.ts b/packages/ice/src/service/serverCompiler.ts
@@ -11,6 +11,7 @@ import { getCompilerPlugins } from '@ice/webpack-config';
 import escapeLocalIdent from '../utils/escapeLocalIdent.js';
 import cssModulesPlugin from '../esbuild/cssModules.js';
 import aliasPlugin from '../esbuild/alias.js';
+import ignorePlugin from '../esbuild/ignore.js';
 import createAssetsPlugin from '../esbuild/assets.js';
 import { ASSETS_MANIFEST, CACHE_DIR, SERVER_OUTPUT_DIR } from '../constant.js';
 import emptyCSSPlugin from '../esbuild/emptyCSS.js';
@@ -124,6 +125,7 @@ export function createServerCompiler(options: Options) {
           externalDependencies: externalDependencies ?? !server.bundle,
           format,
         }),
+        server?.ignores && ignorePlugin(server.ignores),
         cssModulesPlugin({
           extract: false,
           generateLocalIdentName: function (name: string, filename: string) {

diff --git a/packages/plugin-rax-compat/package.json b/packages/plugin-rax-compat/package.json
@@ -17,7 +17,12 @@
     "!esm/**/*.map"
   ],
   "dependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.18.9",
+    "@ice/bundles": "^0.1.0",
+    "babel-plugin-transform-jsx-stylesheet": "1.0.6",
     "consola": "^2.15.3",
+    "css": "^2.2.1",
     "lodash.merge": "^4.6.2",
     "rax-compat": "^0.1.0",
     "stylesheet-loader": "^0.9.1"