fix: moduleDecls minify #1644 (#1650)

farm-fe · Jul 21, 2024 · 5c603a6 · 5c603a6
1 parent 4f700eb
commit 5c603a6
Show file tree

Hide file tree

Showing 19 changed files with 1,054 additions and 147 deletions.
diff --git a/.changeset/olive-vans-fold.md b/.changeset/olive-vans-fold.md
@@ -0,0 +1,5 @@
+---
+"@farmfe/core": patch
+---
+
+fix moduleDecls minify bug #1644
diff --git a/crates/plugin_minify/src/imports_minifier.rs b/crates/plugin_minify/src/imports_minifier.rs
@@ -512,6 +512,14 @@ impl<'a> VisitMut for IdentReplacer {
     }
   }
 
+  // fix #1644. Do not replace ident of member expression
+  fn visit_mut_member_prop(&mut self, n: &mut MemberProp) {
+    // ignore ident and private name of member expression
+    if let MemberProp::Computed(computed) = n {
+      computed.expr.visit_mut_with(self);
+    }
+  }
+
   fn visit_mut_object_pat(&mut self, pat: &mut farmfe_core::swc_ecma_ast::ObjectPat) {
     for n in &mut pat.props {
       match n {

diff --git a/examples/pandacss/.gitignore b/examples/pandacss/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.sln
+*.sw?
+
+## Panda
+styled-system
+styled-system-studio
diff --git a/examples/pandacss/farm.config.ts b/examples/pandacss/farm.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from '@farmfe/core';
+import postcss from '@farmfe/js-plugin-postcss';
+import * as path from "node:path";
+
+export default defineConfig({
+  plugins: ['@farmfe/plugin-react', postcss()],
+  compilation: {
+    output: {
+      publicPath: "./"
+    },
+    sourcemap: false,
+    persistentCache: false,
+    resolve: {
+      alias: {
+        "@/": path.join(process.cwd(), "src"),
+        "@styled-system/": path.join(process.cwd(), "styled-system"),
+      },
+    },
+  }
+});
diff --git a/examples/pandacss/index.html b/examples/pandacss/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <title>Farm + React + TS</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="./src/index.tsx"></script>
+</body>
+</html>
diff --git a/examples/pandacss/package.json b/examples/pandacss/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@farmfe-examples/pandacss",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "farm start",
+    "start": "farm start",
+    "build": "farm build",
+    "preview": "farm preview",
+    "clean": "farm clean",
+    "prepare": "pandacss codegen"
+  },
+  "dependencies": {
+    "react": "18",
+    "react-dom": "18"
+  },
+  "devDependencies": {
+    "@farmfe/cli": "workspace:*",
+    "@farmfe/core": "workspace:*",
+    "@farmfe/js-plugin-postcss": "workspace:*",
+    "@farmfe/plugin-react": "workspace:*",
+    "@pandacss/dev": "^0.42.0",
+    "@types/react": "18",
+    "@types/react-dom": "18",
+    "core-js": "^3.37.1",
+    "postcss": "^8.4.39",
+    "react-refresh": "^0.14.2"
+  }
+}
diff --git a/examples/pandacss/panda.config.ts b/examples/pandacss/panda.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: "styled-system",
+});
diff --git a/examples/pandacss/postcss.config.cjs b/examples/pandacss/postcss.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}
diff --git a/examples/pandacss/public/favicon.ico b/examples/pandacss/public/favicon.ico
diff --git a/examples/pandacss/src/assets/logo.png b/examples/pandacss/src/assets/logo.png
diff --git a/examples/pandacss/src/assets/react.svg b/examples/pandacss/src/assets/react.svg
diff --git a/examples/pandacss/src/index.css b/examples/pandacss/src/index.css
@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;
diff --git a/examples/pandacss/src/index.tsx b/examples/pandacss/src/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Main } from './main';
+import './index.css'
+
+
+const container = document.querySelector('#root');
+const root = createRoot(container);
+
+root.render(<Main />);
diff --git a/examples/pandacss/src/main.tsx b/examples/pandacss/src/main.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import {css} from "@styled-system/css";
+export function Main() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <h1>Farm + React</h1>
+      <div className={css({
+          bg: "red.500",
+          color: "white",
+          w: "md"
+      })}>
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/main.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Farm and React logos to learn more
+      </p>
+    </>
+  );
+}
diff --git a/examples/pandacss/src/typings.d.ts b/examples/pandacss/src/typings.d.ts
@@ -0,0 +1,3 @@
+declare module '*.svg';
+declare module '*.png';
+declare module '*.css';
diff --git a/examples/pandacss/tsconfig.json b/examples/pandacss/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@styled-system/*": ["./styled-system/*"]
+    },
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/pandacss/tsconfig.node.json b/examples/pandacss/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["farm.config.ts"]
+}
diff --git a/packages/core/src/server/middlewares/static.ts b/packages/core/src/server/middlewares/static.ts
@@ -1,5 +1,5 @@
 import fs from 'fs';
-import path from 'path';
+import path, { relative } from 'path';
 import { Context, Middleware, Next } from 'koa';
 import serve from 'koa-static';
 import { Server } from '../index.js';
@@ -14,33 +14,47 @@ export function staticMiddleware(devServerContext: Server): Middleware {
 
   // Fallback
   const fallbackMiddleware: Middleware = async (ctx: Context, next: Next) => {
-    ctx.type = 'html';
-    ctx.body = fs.createReadStream(path.join(config.distDir, 'index.html'));
     await next();
+
+    // If staticMiddleware doesn't find the file, try to serve index.html
+    if (ctx.status === 404 && !ctx.body) {
+      ctx.type = 'html';
+      ctx.body = fs.createReadStream(path.join(config.distDir, 'index.html'));
+    }
   };
 
   return async (ctx: Context, next: Next) => {
+    if (ctx.status !== 404 || ctx.body) {
+      await next();
+      return;
+    }
+
     const requestPath = ctx.request?.path;
+    let modifiedPath = requestPath;
 
-    if (requestPath && requestPath.startsWith(config.output.publicPath)) {
-      const modifiedPath = requestPath.substring(
-        config.output.publicPath.length
-      );
-
-      ctx.request.path = `/${modifiedPath}`;
-
-      try {
-        // Serve middleware for static files
-        await staticMiddleware(ctx, async () => {
-          // If staticMiddleware doesn't find the file or refresh current page router, execute fallbackMiddleware
-          await fallbackMiddleware(ctx, next);
-        });
-      } catch (error) {
-        this.logger.error('Static file handling error:', error);
-        ctx.status = 500;
+    if (requestPath) {
+      if (config.output.publicPath.startsWith('/')) {
+        modifiedPath = requestPath.substring(config.output.publicPath.length);
+      } else {
+        const publicPath = relative(
+          path.join(config.distDir, config.output.publicPath),
+          config.distDir
+        );
+        modifiedPath = requestPath.substring(publicPath.length + 1);
       }
-    } else {
-      await next();
+    }
+
+    ctx.request.path = `/${modifiedPath}`;
+
+    try {
+      // Serve middleware for static files
+      await staticMiddleware(ctx, async () => {
+        // If staticMiddleware doesn't find the file or refresh current page router, execute fallbackMiddleware
+        await fallbackMiddleware(ctx, next);
+      });
+    } catch (error) {
+      devServerContext.logger.error('Static file handling error:', error);
+      ctx.status = 500;
     }
   };
 }