docs: external react

RexSkz · Apr 21, 2024 · d7722be · d7722be
1 parent d85ad71
commit d7722be
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 84 deletions.
diff --git a/.gitignore b/.gitignore
@@ -96,6 +96,7 @@ dist
 # Comment in the public line in if your project uses Gatsby and not Next.js
 # https://nextjs.org/blog/next-9-1#public-directory-support
 # public
+/docs
 
 # vuepress build output
 .vuepress/dist

diff --git a/.swcrc b/.swcrc
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2020",
+    "loose": true,
+    "keepClassNames": true
+  },
+  "minify": false
+}
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # TSX Browser Compiler
 
-Transform a set of `.tsx` file into React element, extremely useful for the "live edit" feature in component library documents.
+Transform a set of `.tsx` (as well as other extensions) files into React elements, extremely useful for the "live edit" feature in component library documents.
diff --git a/package.json b/package.json
@@ -8,8 +8,9 @@
   "scripts": {
     "start": "cross-env rollup -c rollup.config.pages.ts -w",
     "dev": "cross-env pnpm start",
-    "lint:eslint": "eslint --ext .ts,.tsx . --quiet",
-    "lint:stylelint": "stylelint '**/*.{css,less}' --fix",
+    "lint:eslint": "cross-env eslint --ext .ts,.tsx . --quiet",
+    "lint:stylelint": "cross-env stylelint '**/*.{css,less}' --fix",
+    "build": "cross-env rollup -c",
     "build:pages": "cross-env NODE_ENV=production BASEDIR=docs rollup -c rollup.config.pages.ts"
   },
   "repository": {

diff --git a/playground/index.less b/playground/index.less
@@ -82,71 +82,84 @@ a {
       font-weight: 500;
       line-height: var(--playground-controls-height);
 
-      & + div {
-        margin: 0 8px 0 auto;
+      small {
+        margin-left: 8px;
+        font-size: 12px;
+        font-weight: normal;
       }
-    }
-
-    button {
-      box-sizing: border-box;
-      margin-right: 8px;
-      padding: 0 4px;
-      height: 20px;
-      background: var(--playground-button-background);
-      border-radius: 4px;
-      border: 1px solid var(--playground-divider-color);
-      color: var(--playground-text-color);
-      font-size: 12px;
-      vertical-align: middle;
-      cursor: pointer;
 
-      &:active {
-        background: var(--playground-button-hover-background);
+      & + div {
+        margin: 0 8px 0 auto;
       }
     }
 
-    label {
-      position: relative;
-      display: inline-flex;
+    &-buttons {
+      display: flex;
       align-items: center;
-      padding: 4px 8px;
-      font-size: 12px;
 
-      input {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 4px;
-        margin: 0 4px 0 0;
-        appearance: none;
+      button {
+        box-sizing: border-box;
+        margin-right: 8px;
+        padding: 4px 4px;
         background: var(--playground-button-background);
+        border-radius: 4px;
+        border: 1px solid var(--playground-divider-color);
+        color: var(--playground-text-color);
+        font-size: 12px;
+        vertical-align: middle;
         cursor: pointer;
 
-        & + span {
-          z-index: 1;
-          cursor: pointer;
+        &:active {
+          background: var(--playground-button-hover-background);
         }
       }
 
-      & + label input {
-        border-left: none;
-      }
+      label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 8px;
+        font-size: 12px;
 
-      &.checked input {
-        outline: 2px solid var(--playground-tabs-tab-active-border-color);
-        z-index: 1;
-      }
+        .icon {
+          z-index: 2;
+          pointer-events: none;
+        }
 
-      &:first-of-type input {
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-      }
+        input {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: var(--playground-button-background);
+          border: 1px solid var(--playground-divider-color);
+          border-radius: 4px;
+          margin: 0 4px 0 0;
+          appearance: none;
+          cursor: pointer;
+          outline: 2px solid transparent;
+          transition: outline-color 0.2s;
+        }
+
+        & + label input {
+          border-left: none;
+        }
+
+        &.checked input {
+          outline-color: var(--playground-tabs-tab-active-border-color);
+          z-index: 1;
+        }
+
+        &:first-of-type input {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
 
-      &:last-of-type input {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+        &:last-of-type input {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
       }
     }
   }
@@ -218,17 +231,22 @@ a {
           background: var(--playground-code-background);
         }
 
-        &-active:before {
+        &:before {
           position: absolute;
           top: 0;
           right: 0;
           left: 0;
           display: block;
           height: 2px;
-          background: var(--playground-tabs-tab-active-border-color);
+          background: transparent;
+          transition: background 0.2s;
           content: '';
         }
 
+        &-active:before {
+          background: var(--playground-tabs-tab-active-border-color);
+        }
+
         input {
           color: var(--playground-text-color);
         }
@@ -401,3 +419,12 @@ a {
     }
   }
 }
+
+.icon {
+  --icon-size: 16px;
+
+  display: inline-block;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--playground-text-color);
+}
diff --git a/playground/index.tsx b/playground/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { asyncTsxToElement } from '../src';
+import { asyncTsxToElement, VERSION } from '../src';
 
 import CompileResult from './components/compile-result';
 import { defaultCodeSet } from './configs';
@@ -13,10 +13,18 @@ import './index.less';
 
 const localStorageKey = 'tsx-browser-compiler-playground-sources';
 
+const IconSplit = (props: { className?: string; style?: React.CSSProperties }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" {...props}>
+    <rect x="15" y="4" width="2" height="24" />
+    <path d="M10,7V25H4V7h6m0-2H4A2,2,0,0,0,2,7V25a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V7a2,2,0,0,0-2-2Z" />
+    <path d="M28,7V25H22V7h6m0-2H22a2,2,0,0,0-2,2V25a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V7a2,2,0,0,0-2-2Z" />
+  </svg>
+);
+
 const Playground: React.FC = () => {
   const [sources, setSources] = React.useState<[string, string][]>(defaultCodeSet);
   const [loading, setLoading] = React.useState(false);
-  const [layout, setLayout] = React.useState('horizontal');
+  const [layout, setLayout] = React.useState(window.innerWidth < 960 ? 'vertical' : 'horizontal');
   const [displayedChildren, setDisplayedChildren] = React.useState<React.ReactNode>(null);
   const [displayedCompiled, setDisplayedCompiled] = React.useState<[string, string][]>([]);
   const [displayedErrors, setDisplayedErrors] = React.useState<Error[]>([]);
@@ -49,10 +57,7 @@ const Playground: React.FC = () => {
             (content, meta, callback) => {
               (window as any).less.render(
                 content,
-                {
-                  filename: meta.filename,
-                  minimize: true,
-                },
+                { filename: meta.filename },
                 (err: Error, result: { css: string }) => {
                   if (err) {
                     callback(err, '', meta);
@@ -89,26 +94,33 @@ const Playground: React.FC = () => {
   return (
     <div className="app">
       <div className="controls">
-        <h1>TSX Browser Compiler</h1>
-        <div>
+        <h1>
+          TSX Browser Compiler
+          <small>v{VERSION}</small>
+        </h1>
+        <div className="controls-buttons">
           <button onClick={resetDemo}>Reset demo</button>
           <label htmlFor="horizontal" className={layout === 'horizontal' ? 'checked' : ''}>
+            <IconSplit className="icon icon-split-horizontal" />
             <input type="radio"
               name="layout"
               id="horizontal"
-              defaultChecked
+              checked={layout === 'horizontal'}
               onChange={() => setLayout('horizontal')}
             />
-            <span>Horizontal</span>
           </label>
           <label htmlFor="vertical" className={layout === 'vertical' ? 'checked' : ''}>
+            <IconSplit
+              className="icon icon-split-vertical"
+              style={{ transform: 'rotate(90deg)' }}
+            />
             <input
               type="radio"
               id="vertical"
               name="layout"
+              checked={layout === 'vertical'}
               onChange={() => setLayout('vertical')}
             />
-            <span>Vertical</span>
           </label>
         </div>
       </div>

diff --git a/rollup.config.pages.ts b/rollup.config.pages.ts
@@ -13,6 +13,14 @@ import ts from 'typescript';
 import packageJson from './package.json';
 
 const BASEDIR = process.env.BASEDIR || '.cache';
+const reactFile = process.env.NODE_ENV === 'production' ? 'production.min' : 'development';
+
+const globals = {
+  typescript: 'ts',
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react-dom/client': 'ReactDOM',
+};
 
 const plugins = [
   less({
@@ -27,6 +35,7 @@ const plugins = [
 <head>
   <title>TSX Browser Compiler Playground</title>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
   <script>
@@ -38,7 +47,9 @@ const plugins = [
     });
   </script>
   <div id="root"></div>
-  <script src="https://www.unpkg.com/typescript@${ts.version}/lib/typescript.js"></script>
+  <script src="https://unpkg.com/react@18.2.0/umd/react.${reactFile}.js"></script>
+  <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.${reactFile}.js"></script>
+  <script src="https://unpkg.com/typescript@${ts.version}/lib/typescript.js"></script>
   <script src="https://unpkg.com/prettier@3.2.5/standalone.js"></script>
   <script src="https://unpkg.com/prettier@3.2.5/plugins/estree.js"></script>
   <script src="https://unpkg.com/prettier@3.2.5/plugins/babel.js"></script>
@@ -64,21 +75,8 @@ const plugins = [
   swc({
     minify: process.env.NODE_ENV === 'production',
     sourceMaps: process.env.NODE_ENV !== 'production',
-    jsc: {
-      parser: {
-        syntax: 'typescript',
-      },
-      transform: {
-        react: { runtime: 'automatic' },
-      },
-      target: 'es2020',
-      loose: true,
-      keepClassNames: true,
-    },
-  }),
-  externalGlobals({
-    typescript: 'ts',
   }),
+  externalGlobals(globals),
 ];
 
 if (process.env.NODE_ENV !== 'production') {
@@ -102,11 +100,9 @@ export default {
     file: `${BASEDIR}/index.js`,
     name: 'Playground',
     format: 'umd',
-    globals: {
-      react: 'React',
-      'react-dom': 'ReactDOM',
-    },
+    globals,
     sourcemap: process.env.NODE_ENV !== 'production',
   },
+  external: Object.keys(globals),
   plugins,
 };