@vitejs/plugin-react 2.1.0-beta.0 → 2.2.0-beta.0

package/dist/chunks/babel-restore-jsx.cjs

@@ -73,6 +73,8 @@ function babelRestoreJsx({ types: t }, { reactAlias = "React" }) {
         getJSXIdentifier(prop.key),
         getJSXAttributeValue(prop.value)
       ) : t.jsxSpreadAttribute(prop.argument)
+    ).filter(
+      (prop) => t.isJSXIdentifier(prop.name) ? prop.name.name !== "__self" && prop.name.name !== "__source" : true
     );
   }
   function getJSXChild(node) {

package/dist/chunks/babel-restore-jsx.mjs

@@ -71,6 +71,8 @@ function babelRestoreJsx({ types: t }, { reactAlias = "React" }) {
         getJSXIdentifier(prop.key),
         getJSXAttributeValue(prop.value)
       ) : t.jsxSpreadAttribute(prop.argument)
+    ).filter(
+      (prop) => t.isJSXIdentifier(prop.name) ? prop.name.name !== "__self" && prop.name.name !== "__source" : true
     );
   }
   function getJSXChild(node) {

package/dist/index.cjs

@@ -76,21 +76,56 @@ if (import.meta.hot) {
   };
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/[\n]+/gm, "");
-const footer = `
-if (import.meta.hot) {
-  window.$RefreshReg$ = prevRefreshReg;
-  window.$RefreshSig$ = prevRefreshSig;
-
-  __ACCEPT__
+const timeout = `
   if (!window.__vite_plugin_react_timeout) {
     window.__vite_plugin_react_timeout = setTimeout(() => {
       window.__vite_plugin_react_timeout = 0;
       RefreshRuntime.performReactRefresh();
     }, 30);
   }
+`;
+const footer = `
+if (import.meta.hot) {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+
+  __ACCEPT__
 }`;
+const checkAndAccept = `
+function isReactRefreshBoundary(mod) {
+  if (mod == null || typeof mod !== 'object') {
+    return false;
+  }
+  let hasExports = false;
+  let areAllExportsComponents = true;
+  for (const exportName in mod) {
+    hasExports = true;
+    if (exportName === '__esModule') {
+      continue;
+    }
+    const desc = Object.getOwnPropertyDescriptor(mod, exportName);
+    if (desc && desc.get) {
+      // Don't invoke getters as they may have side effects.
+      return false;
+    }
+    const exportValue = mod[exportName];
+    if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
+      areAllExportsComponents = false;
+    }
+  }
+  return hasExports && areAllExportsComponents;
+}
+
+import.meta.hot.accept(mod => {
+  if (isReactRefreshBoundary(mod)) {
+    ${timeout}
+  } else {
+    import.meta.hot.invalidate();
+  }
+});
+`;
 function addRefreshWrapper(code, id, accept) {
-  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__ACCEPT__", accept ? "import.meta.hot.accept();" : "");
+  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__ACCEPT__", accept ? checkAndAccept : timeout);
 }
 function isRefreshBoundary(ast) {
   return ast.program.body.every((node) => {
@@ -305,7 +340,8 @@ function viteReact(opts = {}) {
                 {
                   runtime: "automatic",
                   importSource: opts.jsxImportSource,
-                  pure: opts.jsxPure !== false
+                  pure: opts.jsxPure !== false,
+                  throwIfNamespace: opts.jsxThrowIfNamespace
                 }
               ]);
               if (isCommonJS) {

package/dist/index.d.ts

@@ -26,6 +26,11 @@ interface Options {
      * @default true
      */
     jsxPure?: boolean;
+    /**
+     * Toggles whether or not to throw an error if an XML namespaced tag name is used.
+     * @default true
+     */
+    jsxThrowIfNamespace?: boolean;
     /**
      * Babel configuration applied in both dev and prod.
      */

package/dist/index.mjs

@@ -55,21 +55,56 @@ if (import.meta.hot) {
   };
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/[\n]+/gm, "");
-const footer = `
-if (import.meta.hot) {
-  window.$RefreshReg$ = prevRefreshReg;
-  window.$RefreshSig$ = prevRefreshSig;
-
-  __ACCEPT__
+const timeout = `
   if (!window.__vite_plugin_react_timeout) {
     window.__vite_plugin_react_timeout = setTimeout(() => {
       window.__vite_plugin_react_timeout = 0;
       RefreshRuntime.performReactRefresh();
     }, 30);
   }
+`;
+const footer = `
+if (import.meta.hot) {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+
+  __ACCEPT__
 }`;
+const checkAndAccept = `
+function isReactRefreshBoundary(mod) {
+  if (mod == null || typeof mod !== 'object') {
+    return false;
+  }
+  let hasExports = false;
+  let areAllExportsComponents = true;
+  for (const exportName in mod) {
+    hasExports = true;
+    if (exportName === '__esModule') {
+      continue;
+    }
+    const desc = Object.getOwnPropertyDescriptor(mod, exportName);
+    if (desc && desc.get) {
+      // Don't invoke getters as they may have side effects.
+      return false;
+    }
+    const exportValue = mod[exportName];
+    if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
+      areAllExportsComponents = false;
+    }
+  }
+  return hasExports && areAllExportsComponents;
+}
+
+import.meta.hot.accept(mod => {
+  if (isReactRefreshBoundary(mod)) {
+    ${timeout}
+  } else {
+    import.meta.hot.invalidate();
+  }
+});
+`;
 function addRefreshWrapper(code, id, accept) {
-  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__ACCEPT__", accept ? "import.meta.hot.accept();" : "");
+  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__ACCEPT__", accept ? checkAndAccept : timeout);
 }
 function isRefreshBoundary(ast) {
   return ast.program.body.every((node) => {
@@ -284,7 +319,8 @@ function viteReact(opts = {}) {
                 {
                   runtime: "automatic",
                   importSource: opts.jsxImportSource,
-                  pure: opts.jsxPure !== false
+                  pure: opts.jsxPure !== false,
+                  throwIfNamespace: opts.jsxThrowIfNamespace
                 }
               ]);
               if (isCommonJS) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.1.0-beta.0",
+  "version": "2.2.0-beta.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -39,12 +39,12 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/plugin-transform-react-jsx": "^7.18.10",
+    "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@babel/plugin-transform-react-jsx-development": "^7.18.6",
     "@babel/plugin-transform-react-jsx-self": "^7.18.6",
     "@babel/plugin-transform-react-jsx-source": "^7.18.6",
-    "magic-string": "^0.26.2",
+    "magic-string": "^0.26.5",
     "react-refresh": "^0.14.0"
   },
   "peerDependencies": {

package/src/fast-refresh.ts

@@ -58,20 +58,57 @@ if (import.meta.hot) {
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/[\n]+/gm, '')
 
-const footer = `
-if (import.meta.hot) {
-  window.$RefreshReg$ = prevRefreshReg;
-  window.$RefreshSig$ = prevRefreshSig;
-
-  __ACCEPT__
+const timeout = `
   if (!window.__vite_plugin_react_timeout) {
     window.__vite_plugin_react_timeout = setTimeout(() => {
       window.__vite_plugin_react_timeout = 0;
       RefreshRuntime.performReactRefresh();
     }, 30);
   }
+`
+
+const footer = `
+if (import.meta.hot) {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+
+  __ACCEPT__
 }`
 
+const checkAndAccept = `
+function isReactRefreshBoundary(mod) {
+  if (mod == null || typeof mod !== 'object') {
+    return false;
+  }
+  let hasExports = false;
+  let areAllExportsComponents = true;
+  for (const exportName in mod) {
+    hasExports = true;
+    if (exportName === '__esModule') {
+      continue;
+    }
+    const desc = Object.getOwnPropertyDescriptor(mod, exportName);
+    if (desc && desc.get) {
+      // Don't invoke getters as they may have side effects.
+      return false;
+    }
+    const exportValue = mod[exportName];
+    if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
+      areAllExportsComponents = false;
+    }
+  }
+  return hasExports && areAllExportsComponents;
+}
+
+import.meta.hot.accept(mod => {
+  if (isReactRefreshBoundary(mod)) {
+    ${timeout}
+  } else {
+    import.meta.hot.invalidate();
+  }
+});
+`
+
 export function addRefreshWrapper(
   code: string,
   id: string,
@@ -80,12 +117,13 @@ export function addRefreshWrapper(
   return (
     header.replace('__SOURCE__', JSON.stringify(id)) +
     code +
-    footer.replace('__ACCEPT__', accept ? 'import.meta.hot.accept();' : '')
+    footer.replace('__ACCEPT__', accept ? checkAndAccept : timeout)
   )
 }
 
 export function isRefreshBoundary(ast: t.File): boolean {
-  // Every export must be a React component.
+  // Every export must be a potential React component.
+  // We'll also perform a runtime check that's more robust as well (isLikelyComponentType).
   return ast.program.body.every((node) => {
     if (node.type !== 'ExportNamedDeclaration') {
       return true

package/src/index.ts

@@ -40,6 +40,11 @@ export interface Options {
    * @default true
    */
   jsxPure?: boolean
+  /**
+   * Toggles whether or not to throw an error if an XML namespaced tag name is used.
+   * @default true
+   */
+  jsxThrowIfNamespace?: boolean
   /**
    * Babel configuration applied in both dev and prod.
    */
@@ -248,7 +253,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
                 {
                   runtime: 'automatic',
                   importSource: opts.jsxImportSource,
-                  pure: opts.jsxPure !== false
+                  pure: opts.jsxPure !== false,
+                  throwIfNamespace: opts.jsxThrowIfNamespace
                 }
               ])
 

package/src/jsx-runtime/babel-restore-jsx.spec.ts

@@ -115,4 +115,18 @@ describe('babel-restore-jsx', () => {
       `"React.createElement(aaa);"`
     )
   })
+
+  it('should not handle contains __self prop', () => {
+    expect(
+      jsx('React.createElement(Provider, { __self: this })')
+    ).toMatchInlineSnapshot('"<Provider />;"')
+  })
+
+  it('should not handle contains __source prop', () => {
+    expect(
+      jsx(
+        'React.createElement(Provider, { __source: { fileName: _jsxFileName, lineNumber: 133 }})'
+      )
+    ).toMatchInlineSnapshot('"<Provider />;"')
+  })
 })

package/src/jsx-runtime/babel-restore-jsx.ts

@@ -126,14 +126,20 @@ export default function (
     if (!isPlainObjectExpression(node)) {
       return null
     }
-    return node.properties.map((prop: any) =>
-      t.isObjectProperty(prop)
-        ? t.jsxAttribute(
-            getJSXIdentifier(prop.key)!,
-            getJSXAttributeValue(prop.value)
-          )
-        : t.jsxSpreadAttribute(prop.argument)
-    )
+    return node.properties
+      .map((prop: any) =>
+        t.isObjectProperty(prop)
+          ? t.jsxAttribute(
+              getJSXIdentifier(prop.key)!,
+              getJSXAttributeValue(prop.value)
+            )
+          : t.jsxSpreadAttribute(prop.argument)
+      )
+      .filter((prop: any) =>
+        t.isJSXIdentifier(prop.name)
+          ? prop.name.name !== '__self' && prop.name.name !== '__source'
+          : true
+      )
   }
 
   function getJSXChild(node: any) {