@dev-to/react-plugin 0.2.0 → 0.3.0

package/dist/debugTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debugTools.d.ts","sourceRoot":"","sources":["../src/debugTools.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAA;AAEzC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAG/H,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,cAAc,CAAA;IACxB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,iBAAiB,CAAA;IACxB,cAAc,EAAE,0BAA0B,CAAA;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAqFD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,QAuSxG"}
+{"version":3,"file":"debugTools.d.ts","sourceRoot":"","sources":["../src/debugTools.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAA;AAEzC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAG/H,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,cAAc,CAAA;IACxB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,iBAAiB,CAAA;IACxB,cAAc,EAAE,0BAA0B,CAAA;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAqFD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,QAwUxG"}

package/dist/index.js

@@ -4,6 +4,7 @@ import node_path from "node:path";
 import picocolors from "picocolors";
 import { mergeConfig } from "vite";
 import { exec } from "node:child_process";
+import { fileURLToPath } from "node:url";
 import node_os from "node:os";
 import typescript from "typescript";
 const PLUGIN_NAME = DEV_TO_REACT_NAMESPACE;
@@ -814,7 +815,7 @@ function generateLibBuildNextConfig(params) {
     };
 }
 function createLoaderUmdWrapper(options) {
-    const { componentName, origin, contractEndpoint = constants_STABLE_CONTRACT_PATH } = options;
+    const { componentName, origin, contractEndpoint = constants_STABLE_CONTRACT_PATH, reactLoaderUrl = 'https://cdn.jsdelivr.net/npm/@dev-to/react-loader@latest/dist/index.umd.js' } = options;
     const globalName = toSafeUmdName(componentName);
     const code = `/**
  * UMD Loader Wrapper for component: ${componentName}
@@ -834,14 +835,20 @@ function createLoaderUmdWrapper(options) {
  * 3. Load this wrapper:
  *    <script src="${origin}/__dev_to_react__/loader/${componentName}.js"></script>
  *
- * 4. Render the component:
+ * 4. Render the component (returns a Promise):
  *    <div id="app"></div>
  *    <script>
  *      window.${globalName}.render(
  *        document.getElementById('app'),
- *        { /* your props */ }
- *      );
+ *        { prop1: 'value1', prop2: 'value2' }
+ *      ).then(function(root) {
+ *        console.log('Component rendered successfully');
+ *      }).catch(function(error) {
+ *        console.error('Failed to render component:', error);
+ *      });
  *    </script>
+ *
+ * Note: ReactLoader will be automatically loaded from CDN if not already available.
  */
 (function (root, factory) {
   if (typeof exports === 'object' && typeof module !== 'undefined') {
@@ -858,15 +865,58 @@ function createLoaderUmdWrapper(options) {
 })(this, function (exports, React, ReactDOM, ReactLoaderModule) {
   'use strict';
 
-  // Get ReactLoader component from the module
-  var ReactLoader = ReactLoaderModule && ReactLoaderModule.ReactLoader;
+  var ReactLoader = null;
+  var loadingPromise = null;
+
+  // Helper function to load a script dynamically
+  function loadScript(src) {
+    return new Promise(function(resolve, reject) {
+      var script = document.createElement('script');
+      script.src = src;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+
+  // Helper function to ensure ReactLoader is loaded
+  function ensureReactLoaderLoaded() {
+    if (ReactLoader) {
+      return Promise.resolve();
+    }
+
+    if (!loadingPromise) {
+      loadingPromise = (function() {
+        // First, try to get ReactLoader from the global scope
+        if (typeof window !== 'undefined' && window.DevToReactLoader && window.DevToReactLoader.ReactLoader) {
+          ReactLoader = window.DevToReactLoader.ReactLoader;
+          return Promise.resolve();
+        }
+
+        // If not available, load it from URL
+        console.log('${constants_PLUGIN_LOG_PREFIX} Loading @dev-to/react-loader...');
+        return loadScript(${JSON.stringify(reactLoaderUrl)})
+          .then(function() {
+            if (typeof window !== 'undefined' && window.DevToReactLoader && window.DevToReactLoader.ReactLoader) {
+              ReactLoader = window.DevToReactLoader.ReactLoader;
+              console.log('${constants_PLUGIN_LOG_PREFIX} ReactLoader loaded successfully');
+            } else {
+              throw new Error('${constants_PLUGIN_LOG_PREFIX} ReactLoader not found after loading');
+            }
+          })
+          .catch(function(error) {
+            console.error('${constants_PLUGIN_LOG_PREFIX} Failed to load ReactLoader:', error);
+            throw error;
+          });
+      })();
+    }
+
+    return loadingPromise;
+  }
 
-  if (!ReactLoader) {
-    throw new Error(
-      '${constants_PLUGIN_LOG_PREFIX} ReactLoader not found. ' +
-      'Please load @dev-to/react-loader before this script: ' +
-      '<script src="https://cdn.jsdelivr.net/npm/@dev-to/react-loader@latest/dist/index.umd.js"></script>'
-    );
+  // Try to get ReactLoader from the module if available
+  if (ReactLoaderModule && ReactLoaderModule.ReactLoader) {
+    ReactLoader = ReactLoaderModule.ReactLoader;
   }
 
   // Component configuration
@@ -892,19 +942,26 @@ function createLoaderUmdWrapper(options) {
       throw new Error('${constants_PLUGIN_LOG_PREFIX} ReactDOM is not loaded');
     }
 
-    // Create ReactLoader component props
-    var loaderProps = {
-      origin: config.origin,
-      name: config.name,
-      contractEndpoint: config.contractEndpoint,
-      componentProps: componentProps || {}
-    };
+    // Ensure ReactLoader is available before rendering
+    return ensureReactLoaderLoaded().then(function() {
+      if (!ReactLoader) {
+        throw new Error('${constants_PLUGIN_LOG_PREFIX} ReactLoader initialization failed');
+      }
 
-    // Render using ReactLoader
-    var root = ReactDOM.createRoot(targetElement);
-    root.render(React.createElement(ReactLoader, loaderProps));
+      // Create ReactLoader component props
+      var loaderProps = {
+        origin: config.origin,
+        name: config.name,
+        contractEndpoint: config.contractEndpoint,
+        componentProps: componentProps || {}
+      };
 
-    return root;
+      // Render using ReactLoader
+      var root = ReactDOM.createRoot(targetElement);
+      root.render(React.createElement(ReactLoader, loaderProps));
+
+      return root;
+    });
   }
 
   // Export the API
@@ -1113,6 +1170,27 @@ function installDebugTools(server, ctx, state) {
             }, null, 2));
             return;
         }
+        if (pathname === `${STABLE_BASE_PATH}/react-loader.js`) try {
+            const __filename = fileURLToPath(import.meta.url);
+            const __dirname = node_path.dirname(__filename);
+            const reactLoaderUmdPath = node_path.resolve(__dirname, '../../react-loader/dist/index.umd.js');
+            if (node_fs.existsSync(reactLoaderUmdPath)) {
+                const umdCode = node_fs.readFileSync(reactLoaderUmdPath, 'utf-8');
+                res.statusCode = 200;
+                res.setHeader('Content-Type', "application/javascript; charset=utf-8");
+                res.setHeader('Access-Control-Allow-Origin', '*');
+                res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+                res.end(umdCode);
+                return;
+            }
+            res.statusCode = 404;
+            res.end(`react-loader UMD not found at ${reactLoaderUmdPath}. Run 'pnpm build' in react-loader package.`);
+            return;
+        } catch (error) {
+            res.statusCode = 500;
+            res.end(`Error loading react-loader UMD: ${error}`);
+            return;
+        }
         if (pathname.startsWith(STABLE_LOADER_BASE_PATH)) {
             const loaderPathPattern = new RegExp(`^${STABLE_LOADER_BASE_PATH}/([^/]+)\\.js$`);
             const match = pathname.match(loaderPathPattern);
@@ -1127,7 +1205,8 @@ function installDebugTools(server, ctx, state) {
                 const code = createLoaderUmdWrapper({
                     componentName,
                     origin,
-                    contractEndpoint: constants_STABLE_CONTRACT_PATH
+                    contractEndpoint: constants_STABLE_CONTRACT_PATH,
+                    reactLoaderUrl: `${origin}${STABLE_BASE_PATH}/react-loader.js`
                 });
                 res.statusCode = 200;
                 res.setHeader('Content-Type', "application/javascript; charset=utf-8");

package/dist/loaderUmdWrapper.d.ts

@@ -2,6 +2,7 @@ interface CreateLoaderUmdWrapperOptions {
     componentName: string;
     origin: string;
     contractEndpoint?: string;
+    reactLoaderUrl?: string;
 }
 /**
  * Generate a lightweight UMD wrapper that uses @dev-to/react-loader to load the component.

package/dist/loaderUmdWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loaderUmdWrapper.d.ts","sourceRoot":"","sources":["../src/loaderUmdWrapper.ts"],"names":[],"mappings":"AAGA,UAAU,6BAA6B;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,CA2GrF"}
+{"version":3,"file":"loaderUmdWrapper.d.ts","sourceRoot":"","sources":["../src/loaderUmdWrapper.ts"],"names":[],"mappings":"AAGA,UAAU,6BAA6B;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,CAwKrF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-to/react-plugin",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -31,7 +31,7 @@
   "dependencies": {
     "picocolors": "^1.1.0",
     "typescript": "^5.4.5",
-    "@dev-to/react-shared": "0.1.1"
+    "@dev-to/react-shared": "0.1.2"
   },
   "scripts": {
     "build": "rslib build",