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

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",
+  "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
                 }
               ])