devjar 0.6.0 → 0.7.0

package/dist/index.js

@@ -41,11 +41,12 @@ async function createModule(files, { getModuleUrl }) {
             createInlinedModule(code, fileName.endsWith('.css') ? 'css' : 'js')
         ]));
     updateImportMap(imports);
-    return self.importShim('index.js');
+    return self.importShim('index');
 }
 
 let esModuleLexerInit;
 const isRelative = (s)=>s.startsWith('./');
+const removeExtension = (str)=>str.replace(/\.[^/.]+$/, '');
 function transformCode(_code, getModuleUrl, externals) {
     const code = transform(_code, {
         transforms: [
@@ -105,6 +106,7 @@ function replaceImports(source, getModuleUrl, externals) {
     }
     return code;
 }
+// createRenderer is going to be stringified and executed in the iframe
 function createRenderer(createModule_, getModuleUrl) {
     let reactRoot;
     async function render(files) {
@@ -160,7 +162,7 @@ function createEsShimOptionsScript() {
     return `\
 window.esmsInitOptions = {
   polyfillEnable: ['css-modules', 'json-modules'],
-  onerror: error => console.log(error),
+  onerror: console.error,
 }`;
 }
 function useScript() {
@@ -219,7 +221,7 @@ function useLiveCode({ getModuleUrl }) {
             type: 'module'
         });
         const tailwindScript = createScript(tailwindcssScriptRef, {
-            src: 'https://cdn.tailwindcss.com'
+            src: 'https://unpkg.com/@tailwindcss/browser@4'
         });
         body.appendChild(div);
         body.appendChild(esmShimOptionsScript);
@@ -252,11 +254,17 @@ function useLiveCode({ getModuleUrl }) {
          *  '@mod1': '...',
          *  '@mod2': '...',
          */ const transformedFiles = Object.keys(files).reduce((res, filename)=>{
-                    const key = isRelative(filename) ? '@' + filename.slice(2) : filename;
+                    // 1. Remove ./
+                    // 2. For non css files, remove extension
+                    // e.g. './styles.css' -> '@styles.css'
+                    // e.g. './foo.js' -> '@foo'
+                    const moduleKey = isRelative(filename) ? '@' + filename.slice(2) : filename;
                     if (filename.endsWith('.css')) {
-                        res[key] = files[filename];
+                        res[moduleKey] = files[filename];
                     } else {
-                        res[key] = transformCode(files[filename], getModuleUrl, overrideExternals);
+                        // JS or TS files
+                        const normalizedModuleKey = removeExtension(moduleKey);
+                        res[normalizedModuleKey] = transformCode(files[filename], getModuleUrl, overrideExternals);
                     }
                     return res;
                 }, {});
@@ -269,13 +277,15 @@ function useLiveCode({ getModuleUrl }) {
                     } else {
                         // if render is not loaded yet, wait until it's loaded
                         script.onload = ()=>{
-                            iframe.contentWindow.__render__(transformedFiles);
+                            iframe.contentWindow.__render__(transformedFiles).catch((err)=>{
+                                setError(err);
+                            });
                         };
                     }
                 }
                 setError(undefined);
             } catch (e) {
-                console.error(e);
+                console.warn(e);
                 setError(e);
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devjar",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
@@ -31,12 +31,11 @@
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "bunchee": "^6.3.2",
-    "codice": "^0.4.4",
+    "codice": "1.0.0",
     "devjar": "link:./",
     "next": "^15.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sugar-high": "^0.8.2",
     "typescript": "^5.7.3"
   },
   "packageManager": "pnpm@9.15.4"