Updates some more fixtures to use esm.sh

Author: gnoff

fixtures/fizz-ssr-browser/index.html

@@ -16,9 +16,15 @@ <h1>Fizz Example</h1>
         If you checked out the source from GitHub make sure to run <code>npm run build</code>.
       </p>
     </div>
-    <script src="../../build/oss-experimental/react/umd/react.development.js"></script>
-    <script src="../../build/oss-experimental/react-dom/umd/react-dom.development.js"></script>
-    <script src="../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js"></script>
+    <script type="module">
+      import React from "https://esm.sh/react@canary?dev";
+      import ReactDOM from "https://esm.sh/react-dom@canary?dev";
+      import ReactDOMServer from "https://esm.sh/react-dom@canary/server.browser?dev";
+
+      window.React = React;
+      window.ReactDOM = ReactDOM;
+      window.ReactDOMServer = ReactDOMServer;
+    </script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       async function render() {

fixtures/stacks/BabelClasses-compiled.js

@@ -1,13 +1,13 @@
 // Compile this with Babel.
 // babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps
 
-class BabelClass extends React.Component {
+export class BabelClass extends React.Component {
   render() {
     return this.props.children;
   }
 }
 
-class BabelClassWithFields extends React.Component {
+export class BabelClassWithFields extends React.Component {
   // These compile to defineProperty which can break some interception techniques.
   props;
   state = {};

fixtures/stacks/BabelClasses-compiled.js.map

@@ -1,25 +1,25 @@
 // Example
 
-const Throw = React.lazy(() => {
+export const Throw = React.lazy(() => {
   throw new Error('Example');
 });
 
-const Component = React.memo(function Component({children}) {
+export const Component = React.memo(function Component({children}) {
   return children;
 });
 
-function DisplayName({children}) {
+export function DisplayName({children}) {
   return children;
 }
 DisplayName.displayName = 'Custom Name';
 
-class NativeClass extends React.Component {
+export class NativeClass extends React.Component {
   render() {
     return this.props.children;
   }
 }
 
-class FrozenClass extends React.Component {
+export class FrozenClass extends React.Component {
   constructor() {
     super();
   }

fixtures/stacks/BabelClasses.js

@@ -1,4 +1,11 @@
-// Example
+import {BabelClass, BabelClassWithFields} from './BabelClasses-compiled.js';
+import {
+  Throw,
+  Component,
+  DisplayName,
+  NativeClass,
+  FrozenClass,
+} from './Components.js';
 
 const x = React.createElement;
 
@@ -29,7 +36,7 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-function Example() {
+export default function Example() {
   let state = React.useState(false);
   return x(
     ErrorBoundary,
@@ -38,25 +45,21 @@ function Example() {
       DisplayName,
       null,
       x(
-        React.unstable_SuspenseList,
+        NativeClass,
         null,
         x(
-          NativeClass,
+          FrozenClass,
           null,
           x(
-            FrozenClass,
+            BabelClass,
             null,
             x(
-              BabelClass,
+              BabelClassWithFields,
               null,
               x(
-                BabelClassWithFields,
+                React.Suspense,
                 null,
-                x(
-                  React.Suspense,
-                  null,
-                  x('div', null, x(Component, null, x(Throw)))
-                )
+                x('div', null, x(Component, null, x(Throw)))
               )
             )
           )

fixtures/stacks/Components.js

@@ -25,14 +25,19 @@
         If you checked out the source from GitHub make sure to run <code>npm run build</code>.
       </p>
     </div>
-    <script src="../../build/oss-experimental/react/umd/react.production.min.js"></script>
-    <script src="../../build/oss-experimental/react-dom/umd/react-dom.production.min.js"></script>
-    <script src="./Components.js"></script>
-    <script src="./BabelClasses-compiled.js"></script>
-    <script src="./Example.js"></script>
-    <script>
-      const container = document.getElementById("container");
-      ReactDOM.render(React.createElement(Example), container);
+    <script type="module">
+      import React from 'https://esm.sh/react@canary/?dev';
+      import ReactDOMClient from 'https://esm.sh/react-dom@canary/client?dev';
+
+      window.React = React;
+      window.ReactDOMClient = ReactDOMClient;
+
+      import("./Example.js").then(({ default: Example }) => {
+        console.log("Example", Example)
+        const container = document.getElementById("container");
+        const root = ReactDOMClient.createRoot(container);
+        root.render(React.createElement(Example));
+      });
     </script>
     <h3>The above stack should look something like this:</h3>
     <pre>
@@ -44,7 +49,6 @@ <h3>The above stack should look something like this:</h3>
     at BabelClass (/stacks/BabelClass-compiled.js:13:29)
     at FrozenClass (/stacks/Components.js:22:1)
     at NativeClass (/stacks/Component.js:16:1)
-    at SuspenseList
     at Custom Name (/stacks/Component.js:11:1)
     at ErrorBoundary (/stacks/Example.js:5:1)
     at Example (/stacks/Example.js:32:1)</pre>

fixtures/stacks/Example.js

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "build": "babel --config-file ./babel.config.json BabelClasses.js -o BabelClasses-compiled.js --source-maps",
+    "dev": "http-server ."
+  },
+  "dependencies": {
+    "http-server": "^14.1.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4"
+  }
+}