@symbo.ls/create 3.1.1 → 3.2.3

package/dist/cjs/createDomql.js

@@ -36,15 +36,18 @@ var import_domql = __toESM(require("domql"), 1);
 var uikit = __toESM(require("@symbo.ls/uikit"), 1);
 var import_utils = require("@domql/utils");
 var import_event = require("@domql/event");
-var import_define = require("./define");
-var import_router = require("./router");
-var import_syncExtend = require("./syncExtend");
-var import_prepare = require("./prepare");
-const prepareContext = (app, context = {}) => {
+var import_define = require("./define.js");
+var import_router = require("./router.js");
+var import_syncExtend = require("./syncExtend.js");
+var import_prepare = require("./prepare.js");
+const prepareContext = async (app, context = {}) => {
   const key = context.key = context.key || ((0, import_utils.isString)(app) ? app : "smblsapp");
   context.define = context.define || import_define.defaultDefine;
   context.window = (0, import_prepare.prepareWindow)(context);
-  const [scratcDesignSystem, emotion, registry] = (0, import_prepare.prepareDesignSystem)(key, context);
+  const [scratcDesignSystem, emotion, registry] = (0, import_prepare.prepareDesignSystem)(
+    key,
+    context
+  );
   context.designSystem = scratcDesignSystem;
   context.registry = registry;
   context.emotion = emotion;
@@ -53,7 +56,7 @@ const prepareContext = (app, context = {}) => {
   context.pages = (0, import_prepare.preparePages)(app, context);
   context.components = (0, import_prepare.prepareComponents)(context);
   context.utils = (0, import_prepare.prepareUtils)(context);
-  context.dependencies = (0, import_prepare.prepareDependencies)(context);
+  context.dependencies = await (0, import_prepare.prepareDependencies)(context);
   context.methods = (0, import_prepare.prepareMethods)(context);
   context.routerOptions = (0, import_router.initRouter)(app, context);
   context.defaultExtends = [uikit.Box];
@@ -74,19 +77,22 @@ const createDomqlElement = async (app, ctx) => {
   if (!(0, import_utils.isObject)(app)) {
     app = {};
   }
-  prepareContext(app, ctx);
+  await prepareContext(app, ctx);
   app.extends = (0, import_syncExtend.initializeExtend)(app, ctx);
   app.routes = ctx.pages;
   app.state = ctx.state;
   app.context = ctx;
   app.data = app.data || {};
   app.data.frameListeners = (0, import_event.initAnimationFrame)(ctx);
-  (0, import_prepare.prepareRequire)({
-    functions: ctx.functions,
-    utils: ctx.utils,
-    snippets: ctx.snippets,
-    ...ctx.files
-  }, ctx);
+  await (0, import_prepare.prepareRequire)(
+    {
+      functions: ctx.functions,
+      utils: ctx.utils,
+      snippets: ctx.snippets,
+      ...ctx.files
+    },
+    ctx
+  );
   (0, import_syncExtend.initializeSync)(app, ctx);
   (0, import_syncExtend.initializeInspect)(app, ctx);
   (0, import_syncExtend.initializeNotifications)(app, ctx);

package/dist/cjs/index.js

@@ -36,12 +36,12 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_utils = require("@domql/utils");
-var utils = __toESM(require("./utilImports"), 1);
-var import_router = require("./router");
-var import_ferchOnCreate = require("./ferchOnCreate");
-var import_options = __toESM(require("./options"), 1);
+var utils = __toESM(require("./utilImports.js"), 1);
+var import_router = require("./router.js");
+var import_ferchOnCreate = require("./ferchOnCreate.js");
+var import_options = __toESM(require("./options.js"), 1);
 var import_dynamic = __toESM(require("@symbo.ls/init/dynamic.json"), 1);
-var import_createDomql = require("./createDomql");
+var import_createDomql = require("./createDomql.js");
 const mergeWithLocalFile = (options, optionsExternalFile) => (0, import_utils.deepMerge)(
   options,
   (0, import_utils.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic.default || {}

package/dist/cjs/initEmotion.js

@@ -25,7 +25,7 @@ var import_emotion = require("@domql/emotion");
 var import_emotion2 = require("@symbo.ls/emotion");
 var import_init = require("@symbo.ls/init");
 var import_utils = require("@domql/utils");
-var import_options = require("./options");
+var import_options = require("./options.js");
 var import_default_config = require("@symbo.ls/default-config");
 const initEmotion = (key, options = {}) => {
   var _a;

package/dist/cjs/options.js

@@ -23,7 +23,7 @@ __export(options_exports, {
   default: () => options_default
 });
 module.exports = __toCommonJS(options_exports);
-var import_define = require("./define");
+var import_define = require("./define.js");
 const DESIGN_SYSTEM_OPTIONS = {
   useReset: true,
   useVariable: true,

package/dist/cjs/prepare.js

@@ -41,11 +41,11 @@ __export(prepare_exports, {
 });
 module.exports = __toCommonJS(prepare_exports);
 var import_utils = require("@domql/utils");
-var import_initEmotion = require("./initEmotion");
+var import_initEmotion = require("./initEmotion.js");
 var uikit = __toESM(require("@symbo.ls/uikit"), 1);
-var utils = __toESM(require("./utilImports"), 1);
+var utils = __toESM(require("./utilImports.js"), 1);
 var routerUtils = __toESM(require("@domql/router"), 1);
-const ENV = "development";
+// @preserve-env
 const prepareWindow = (context) => {
   if (typeof window === "undefined") window = globalThis || {};
   if (typeof document === "undefined") {
@@ -53,7 +53,8 @@ const prepareWindow = (context) => {
     document = window.document;
   }
   context.document = context.document || document;
-  return context.window = context.window || window;
+  context.window = context.window || window;
+  return context.window;
 };
 function onlyDotsAndNumbers(str) {
   return /^[0-9.]+$/.test(str) && str !== "";
@@ -75,74 +76,82 @@ const prepareComponents = (context) => {
   return context.components ? { ...UIkitWithPrefix(), ...context.components } : UIkitWithPrefix();
 };
 const prepareUtils = (context) => {
-  return { ...utils, ...routerUtils, ...utils.scratchUtils, ...context.utils, ...context.snippets, ...context.functions };
+  return {
+    ...utils,
+    ...routerUtils,
+    ...utils.scratchUtils,
+    ...context.utils,
+    ...context.snippets,
+    ...context.functions
+  };
 };
 const prepareMethods = (context) => {
   return {
     ...context.methods || {},
     require: context.utils.require,
-    requireOnDemand: context.utils.requireOnDemand,
-    call: function(fnKey, ...args) {
-      var _a;
-      return (_a = context.utils[fnKey] || context.functions[fnKey] || context.methods[fnKey] || context.snippets[fnKey]) == null ? void 0 : _a.call(this, ...args);
-    }
+    requireOnDemand: context.utils.requireOnDemand
   };
 };
 const cachedDeps = {};
-const prepareDependencies = ({
+const prepareDependencies = async ({
   dependencies,
   dependenciesOnDemand,
-  document: document2
+  document: document2,
+  preventCaching = false
 }) => {
   if (!dependencies || Object.keys(dependencies).length === 0) {
     return null;
   }
   for (const [dependency, version] of Object.entries(dependencies)) {
-    if (version === "loading" || version === "error") {
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
       continue;
     }
-    const random = ENV === "development" ? `?${Math.random()}` : "";
+    const random = (0, import_utils.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
     let url = `https://pkg.symbo.ls/${dependency}/${version}.js${random}`;
     if (dependency.split("/").length > 2 || !onlyDotsAndNumbers(version)) {
       url = `https://pkg.symbo.ls/${dependency}${random}`;
     }
-    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) continue;
     try {
       if (cachedDeps[dependency]) return;
       cachedDeps[dependency] = true;
-      utils.loadJavascriptFileEmbedSync(url, document2);
+      await utils.loadRemoteScript(url, { document: document2 });
     } catch (e) {
       console.error(`Failed to load ${dependency}:`, e);
     }
   }
   return dependencies;
 };
-const prepareRequire = (packages, ctx) => {
+const prepareRequire = async (packages, ctx) => {
   const windowOpts = ctx.window || window;
-  const initRequire = (ctx2) => (key) => {
+  const initRequire = async (ctx2) => async (key) => {
     const windowOpts2 = ctx2.window || window;
     const pkg = windowOpts2.packages[key];
     if (typeof pkg === "function") return pkg();
     return pkg;
   };
-  const initRequireOnDemand = (ctx2) => (key) => {
+  const initRequireOnDemand = async (ctx2) => async (key) => {
     const { dependenciesOnDemand } = ctx2;
     const documentOpts = ctx2.document || document;
     const windowOpts2 = ctx2.window || window;
     if (!windowOpts2.packages[key]) {
-      const random = ENV === "development" ? `?${Math.random()}` : "";
+      const random = (0, import_utils.isDevelopment)() ? `?${Math.random()}` : "";
       if (dependenciesOnDemand && dependenciesOnDemand[key]) {
         const version = dependenciesOnDemand[key];
         const url = `https://pkg.symbo.ls/${key}/${version}.js${random}`;
-        ctx2.utils.loadJavascriptFileEmbedSync(url, documentOpts);
+        await ctx2.utils.loadRemoteScript(url, {
+          window: windowOpts2,
+          document: documentOpts
+        });
       } else {
         const url = `https://pkg.symbo.ls/${key}${random}`;
-        ctx2.utils.loadJavascriptFileEmbedSync(url, documentOpts, (d) => {
-          windowOpts2.packages[key] = "loadedOnDeman";
+        await ctx2.utils.loadRemoteScript(url, {
+          window: windowOpts2,
+          document: documentOpts
         });
+        windowOpts2.packages[key] = "loadedOnDeman";
       }
     }
-    return windowOpts2.require(key);
+    return await windowOpts2.require(key);
   };
   if (windowOpts.packages) {
     windowOpts.packages = (0, import_utils.merge)(windowOpts.packages, packages);
@@ -150,11 +159,11 @@ const prepareRequire = (packages, ctx) => {
     windowOpts.packages = packages;
   }
   if (!windowOpts.require) {
-    ctx.utils.require = initRequire(ctx);
+    ctx.utils.require = await initRequire(ctx);
     windowOpts.require = ctx.utils.require;
   }
   if (!windowOpts.requireOnDemand) {
-    ctx.utils.requireOnDemand = initRequireOnDemand(ctx);
+    ctx.utils.requireOnDemand = await initRequireOnDemand(ctx);
     windowOpts.requireOnDemand = ctx.utils.requireOnDemand;
   }
 };

package/dist/cjs/router.js

@@ -25,6 +25,7 @@ __export(router_exports, {
 module.exports = __toCommonJS(router_exports);
 var import_router = require("@domql/router");
 var import_utils = require("@domql/utils");
+var import_smbls = require("smbls");
 const DEFAULT_ROUTING_OPTIONS = {
   initRouter: true,
   injectRouterInLinkComponent: true,
@@ -61,15 +62,23 @@ const popStateRouter = (element, context) => {
   const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
   if (!routerOptions.popState) return;
   const router = context.utils && context.utils.router ? context.utils.router : import_router.router;
-  import_utils.window.onpopstate = (e) => {
+  import_utils.window.onpopstate = async (e) => {
     const { pathname, search, hash } = import_utils.window.location;
     const url = pathname + search + hash;
-    router(url, element, {}, { pushState: false, scrollToTop: false, level: 0 });
+    await router(
+      url,
+      element,
+      {},
+      { pushState: false, scrollToTop: false, level: 0, event: e }
+    );
   };
 };
 const injectRouterInLinkComponent = (context, routerOptions) => {
-  const { Link, RouterLink } = context.components;
+  const { components } = context;
   if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-    return (0, import_utils.deepMerge)(Link, RouterLink);
+    return (0, import_utils.deepMerge)(
+      components["Link"] || components["smbls.Link"],
+      components["RouterLink"] || components["smbls.RouterLink"]
+    );
   }
 };

package/dist/esm/createDomql.js

@@ -18,9 +18,14 @@ import DOM from "domql";
 import * as uikit from "@symbo.ls/uikit";
 import { isString, isNode, isObject } from "@domql/utils";
 import { initAnimationFrame } from "@domql/event";
-import { defaultDefine } from "./define";
-import { initRouter } from "./router";
-import { initializeExtend, initializeInspect, initializeNotifications, initializeSync } from "./syncExtend";
+import { defaultDefine } from "./define.js";
+import { initRouter } from "./router.js";
+import {
+  initializeExtend,
+  initializeInspect,
+  initializeNotifications,
+  initializeSync
+} from "./syncExtend.js";
 import {
   prepareComponents,
   prepareDependencies,
@@ -31,12 +36,15 @@ import {
   prepareState,
   prepareUtils,
   prepareMethods
-} from "./prepare";
-const prepareContext = (app, context = {}) => {
+} from "./prepare.js";
+const prepareContext = async (app, context = {}) => {
   const key = context.key = context.key || (isString(app) ? app : "smblsapp");
   context.define = context.define || defaultDefine;
   context.window = prepareWindow(context);
-  const [scratcDesignSystem, emotion, registry] = prepareDesignSystem(key, context);
+  const [scratcDesignSystem, emotion, registry] = prepareDesignSystem(
+    key,
+    context
+  );
   context.designSystem = scratcDesignSystem;
   context.registry = registry;
   context.emotion = emotion;
@@ -45,7 +53,7 @@ const prepareContext = (app, context = {}) => {
   context.pages = preparePages(app, context);
   context.components = prepareComponents(context);
   context.utils = prepareUtils(context);
-  context.dependencies = prepareDependencies(context);
+  context.dependencies = await prepareDependencies(context);
   context.methods = prepareMethods(context);
   context.routerOptions = initRouter(app, context);
   context.defaultExtends = [uikit.Box];
@@ -66,18 +74,21 @@ const createDomqlElement = async (app, ctx) => {
   if (!isObject(app)) {
     app = {};
   }
-  prepareContext(app, ctx);
+  await prepareContext(app, ctx);
   app.extends = initializeExtend(app, ctx);
   app.routes = ctx.pages;
   app.state = ctx.state;
   app.context = ctx;
   app.data = app.data || {};
   app.data.frameListeners = initAnimationFrame(ctx);
-  prepareRequire(__spreadValues({
-    functions: ctx.functions,
-    utils: ctx.utils,
-    snippets: ctx.snippets
-  }, ctx.files), ctx);
+  await prepareRequire(
+    __spreadValues({
+      functions: ctx.functions,
+      utils: ctx.utils,
+      snippets: ctx.snippets
+    }, ctx.files),
+    ctx
+  );
   initializeSync(app, ctx);
   initializeInspect(app, ctx);
   initializeNotifications(app, ctx);

package/dist/esm/index.js

@@ -15,12 +15,12 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { deepMerge, isObject, isUndefined } from "@domql/utils";
-import * as utils from "./utilImports";
-import { popStateRouter } from "./router";
-import { fetchAsync, fetchSync } from "./ferchOnCreate";
-import DEFAULT_CREATE_OPTIONS from "./options";
+import * as utils from "./utilImports.js";
+import { popStateRouter } from "./router.js";
+import { fetchAsync, fetchSync } from "./ferchOnCreate.js";
+import DEFAULT_CREATE_OPTIONS from "./options.js";
 import DYNAMIC_JSON from "@symbo.ls/init/dynamic.json";
-import { createDomqlElement } from "./createDomql";
+import { createDomqlElement } from "./createDomql.js";
 const mergeWithLocalFile = (options, optionsExternalFile) => deepMerge(
   options,
   isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}

package/dist/esm/initEmotion.js

@@ -18,7 +18,7 @@ import { transformDOMQLEmotion } from "@domql/emotion";
 import { emotion as defaultEmotion } from "@symbo.ls/emotion";
 import { init } from "@symbo.ls/init";
 import { deepClone, deepMerge } from "@domql/utils";
-import { DESIGN_SYSTEM_OPTIONS } from "./options";
+import { DESIGN_SYSTEM_OPTIONS } from "./options.js";
 import { DEFAULT_CONFIG } from "@symbo.ls/default-config";
 const initEmotion = (key, options = {}) => {
   var _a;

package/dist/esm/options.js

@@ -1,4 +1,4 @@
-import { defaultDefine } from "./define";
+import { defaultDefine } from "./define.js";
 const DESIGN_SYSTEM_OPTIONS = {
   useReset: true,
   useVariable: true,

package/dist/esm/prepare.js

@@ -22,13 +22,14 @@ import {
   deepMerge,
   deepClone,
   merge,
+  isDevelopment,
   matchesComponentNaming
 } from "@domql/utils";
-import { initEmotion } from "./initEmotion";
+import { initEmotion } from "./initEmotion.js";
 import * as uikit from "@symbo.ls/uikit";
-import * as utils from "./utilImports";
+import * as utils from "./utilImports.js";
 import * as routerUtils from "@domql/router";
-const ENV = "development";
+// @preserve-env
 const prepareWindow = (context) => {
   if (typeof window === "undefined") window = globalThis || {};
   if (typeof document === "undefined") {
@@ -36,7 +37,8 @@ const prepareWindow = (context) => {
     document = window.document;
   }
   context.document = context.document || document;
-  return context.window = context.window || window;
+  context.window = context.window || window;
+  return context.window;
 };
 function onlyDotsAndNumbers(str) {
   return /^[0-9.]+$/.test(str) && str !== "";
@@ -63,68 +65,69 @@ const prepareUtils = (context) => {
 const prepareMethods = (context) => {
   return __spreadProps(__spreadValues({}, context.methods || {}), {
     require: context.utils.require,
-    requireOnDemand: context.utils.requireOnDemand,
-    call: function(fnKey, ...args) {
-      var _a;
-      return (_a = context.utils[fnKey] || context.functions[fnKey] || context.methods[fnKey] || context.snippets[fnKey]) == null ? void 0 : _a.call(this, ...args);
-    }
+    requireOnDemand: context.utils.requireOnDemand
   });
 };
 const cachedDeps = {};
-const prepareDependencies = ({
+const prepareDependencies = async ({
   dependencies,
   dependenciesOnDemand,
-  document: document2
+  document: document2,
+  preventCaching = false
 }) => {
   if (!dependencies || Object.keys(dependencies).length === 0) {
     return null;
   }
   for (const [dependency, version] of Object.entries(dependencies)) {
-    if (version === "loading" || version === "error") {
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
       continue;
     }
-    const random = ENV === "development" ? `?${Math.random()}` : "";
+    const random = isDevelopment() && preventCaching ? `?${Math.random()}` : "";
     let url = `https://pkg.symbo.ls/${dependency}/${version}.js${random}`;
     if (dependency.split("/").length > 2 || !onlyDotsAndNumbers(version)) {
       url = `https://pkg.symbo.ls/${dependency}${random}`;
     }
-    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) continue;
     try {
       if (cachedDeps[dependency]) return;
       cachedDeps[dependency] = true;
-      utils.loadJavascriptFileEmbedSync(url, document2);
+      await utils.loadRemoteScript(url, { document: document2 });
     } catch (e) {
       console.error(`Failed to load ${dependency}:`, e);
     }
   }
   return dependencies;
 };
-const prepareRequire = (packages, ctx) => {
+const prepareRequire = async (packages, ctx) => {
   const windowOpts = ctx.window || window;
-  const initRequire = (ctx2) => (key) => {
+  const initRequire = async (ctx2) => async (key) => {
     const windowOpts2 = ctx2.window || window;
     const pkg = windowOpts2.packages[key];
     if (typeof pkg === "function") return pkg();
     return pkg;
   };
-  const initRequireOnDemand = (ctx2) => (key) => {
+  const initRequireOnDemand = async (ctx2) => async (key) => {
     const { dependenciesOnDemand } = ctx2;
     const documentOpts = ctx2.document || document;
     const windowOpts2 = ctx2.window || window;
     if (!windowOpts2.packages[key]) {
-      const random = ENV === "development" ? `?${Math.random()}` : "";
+      const random = isDevelopment() ? `?${Math.random()}` : "";
       if (dependenciesOnDemand && dependenciesOnDemand[key]) {
         const version = dependenciesOnDemand[key];
         const url = `https://pkg.symbo.ls/${key}/${version}.js${random}`;
-        ctx2.utils.loadJavascriptFileEmbedSync(url, documentOpts);
+        await ctx2.utils.loadRemoteScript(url, {
+          window: windowOpts2,
+          document: documentOpts
+        });
       } else {
         const url = `https://pkg.symbo.ls/${key}${random}`;
-        ctx2.utils.loadJavascriptFileEmbedSync(url, documentOpts, (d) => {
-          windowOpts2.packages[key] = "loadedOnDeman";
+        await ctx2.utils.loadRemoteScript(url, {
+          window: windowOpts2,
+          document: documentOpts
         });
+        windowOpts2.packages[key] = "loadedOnDeman";
       }
     }
-    return windowOpts2.require(key);
+    return await windowOpts2.require(key);
   };
   if (windowOpts.packages) {
     windowOpts.packages = merge(windowOpts.packages, packages);
@@ -132,11 +135,11 @@ const prepareRequire = (packages, ctx) => {
     windowOpts.packages = packages;
   }
   if (!windowOpts.require) {
-    ctx.utils.require = initRequire(ctx);
+    ctx.utils.require = await initRequire(ctx);
     windowOpts.require = ctx.utils.require;
   }
   if (!windowOpts.requireOnDemand) {
-    ctx.utils.requireOnDemand = initRequireOnDemand(ctx);
+    ctx.utils.requireOnDemand = await initRequireOnDemand(ctx);
     windowOpts.requireOnDemand = ctx.utils.requireOnDemand;
   }
 };

package/dist/esm/router.js

@@ -1,5 +1,6 @@
 import { router as defaultRouter } from "@domql/router";
 import { window, deepMerge, merge, isUndefined } from "@domql/utils";
+import { Link } from "smbls";
 const DEFAULT_ROUTING_OPTIONS = {
   initRouter: true,
   injectRouterInLinkComponent: true,
@@ -36,16 +37,24 @@ const popStateRouter = (element, context) => {
   const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
   if (!routerOptions.popState) return;
   const router = context.utils && context.utils.router ? context.utils.router : defaultRouter;
-  window.onpopstate = (e) => {
+  window.onpopstate = async (e) => {
     const { pathname, search, hash } = window.location;
     const url = pathname + search + hash;
-    router(url, element, {}, { pushState: false, scrollToTop: false, level: 0 });
+    await router(
+      url,
+      element,
+      {},
+      { pushState: false, scrollToTop: false, level: 0, event: e }
+    );
   };
 };
 const injectRouterInLinkComponent = (context, routerOptions) => {
-  const { Link, RouterLink } = context.components;
+  const { components } = context;
   if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-    return deepMerge(Link, RouterLink);
+    return deepMerge(
+      components["Link"] || components["smbls.Link"],
+      components["RouterLink"] || components["smbls.RouterLink"]
+    );
   }
 };
 export {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "3.1.1",
+  "version": "3.2.3",
   "license": "MIT",
-  "gitHead": "39fb7a8c07355468ccce79e2f787ca3fa0715692",
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "type": "module",
   "module": "src/index.js",
   "main": "src/index.js",
@@ -10,9 +10,9 @@
   "jsdelivr": "dist/iife/index.js",
   "exports": {
     ".": {
-      "default": "./dist/esm/index.js",
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
     }
   },
   "source": "src/index.js",
@@ -22,24 +22,24 @@
   ],
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx esbuild src/*.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx esbuild src/*.js --target=node16 --format=cjs --outdir=dist/cjs",
-    "build:iife": "npx esbuild src/*.js --target=node16 --format=iife --outdir=dist/iife",
+    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild src/*.js --target=es2017 --format=esm --outdir=dist/esm",
+    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild src/*.js --target=node16 --format=cjs --outdir=dist/cjs",
+    "build:iife": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild src/*.js --target=node16 --format=iife --outdir=dist/iife",
     "build": "rimraf -I dist; npm run build:cjs; npm run build:esm",
     "prepublish": "npm run build; npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/emotion": "^3.1.1",
-    "@domql/event": "^3.1.1",
-    "@domql/report": "^3.1.1",
-    "@domql/router": "^3.1.1",
-    "@symbo.ls/fetch": "^3.1.1",
-    "@symbo.ls/init": "^3.1.1",
-    "@symbo.ls/scratch": "^3.1.1",
-    "@symbo.ls/sync": "^3.1.1",
-    "@symbo.ls/uikit": "^3.1.1",
-    "@symbo.ls/utils": "^3.1.1",
-    "domql": "^3.1.1"
+    "@domql/emotion": "^3.2.3",
+    "@domql/event": "^3.2.3",
+    "@domql/report": "^3.2.3",
+    "@domql/router": "^3.2.3",
+    "@symbo.ls/fetch": "^3.2.3",
+    "@symbo.ls/init": "^3.2.3",
+    "@symbo.ls/scratch": "^3.2.3",
+    "@symbo.ls/sync": "^3.2.3",
+    "@symbo.ls/uikit": "^3.2.3",
+    "@symbo.ls/utils": "^3.2.3",
+    "domql": "^3.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0"

package/src/createDomql.js

@@ -5,9 +5,14 @@ import * as uikit from '@symbo.ls/uikit'
 
 import { isString, isNode, isObject } from '@domql/utils'
 import { initAnimationFrame } from '@domql/event'
-import { defaultDefine } from './define'
-import { initRouter } from './router'
-import { initializeExtend, initializeInspect, initializeNotifications, initializeSync } from './syncExtend'
+import { defaultDefine } from './define.js'
+import { initRouter } from './router.js'
+import {
+  initializeExtend,
+  initializeInspect,
+  initializeNotifications,
+  initializeSync
+} from './syncExtend.js'
 
 import {
   prepareComponents,
@@ -19,14 +24,17 @@ import {
   prepareState,
   prepareUtils,
   prepareMethods
-} from './prepare'
+} from './prepare.js'
 
-export const prepareContext = (app, context = {}) => {
+export const prepareContext = async (app, context = {}) => {
   // const rcFileKey = process?.env?.SYMBOLS_KEY
-  const key = context.key = context.key || (isString(app) ? app : 'smblsapp')
+  const key = (context.key = context.key || (isString(app) ? app : 'smblsapp'))
   context.define = context.define || defaultDefine
   context.window = prepareWindow(context)
-  const [scratcDesignSystem, emotion, registry] = prepareDesignSystem(key, context)
+  const [scratcDesignSystem, emotion, registry] = prepareDesignSystem(
+    key,
+    context
+  )
   context.designSystem = scratcDesignSystem
   context.registry = registry
   context.emotion = emotion
@@ -35,7 +43,7 @@ export const prepareContext = (app, context = {}) => {
   context.pages = preparePages(app, context)
   context.components = prepareComponents(context)
   context.utils = prepareUtils(context)
-  context.dependencies = prepareDependencies(context)
+  context.dependencies = await prepareDependencies(context)
   context.methods = prepareMethods(context)
   context.routerOptions = initRouter(app, context)
   context.defaultExtends = [uikit.Box]
@@ -58,7 +66,7 @@ export const createDomqlElement = async (app, ctx) => {
     app = {}
   }
 
-  prepareContext(app, ctx)
+  await prepareContext(app, ctx)
 
   app.extends = initializeExtend(app, ctx)
   app.routes = ctx.pages
@@ -67,12 +75,15 @@ export const createDomqlElement = async (app, ctx) => {
   app.data = app.data || {}
   app.data.frameListeners = initAnimationFrame(ctx)
 
-  prepareRequire({
-    functions: ctx.functions,
-    utils: ctx.utils,
-    snippets: ctx.snippets,
-    ...ctx.files
-  }, ctx)
+  await prepareRequire(
+    {
+      functions: ctx.functions,
+      utils: ctx.utils,
+      snippets: ctx.snippets,
+      ...ctx.files
+    },
+    ctx
+  )
 
   initializeSync(app, ctx)
   initializeInspect(app, ctx)

package/src/index.js

@@ -2,14 +2,14 @@
 
 import { deepMerge, isObject, isUndefined } from '@domql/utils'
 
-import * as utils from './utilImports'
+import * as utils from './utilImports.js'
 
-import { popStateRouter } from './router'
-import { fetchAsync, fetchSync } from './ferchOnCreate'
+import { popStateRouter } from './router.js'
+import { fetchAsync, fetchSync } from './ferchOnCreate.js'
 
-import DEFAULT_CREATE_OPTIONS from './options'
-import DYNAMIC_JSON from '@symbo.ls/init/dynamic.json'
-import { createDomqlElement } from './createDomql'
+import DEFAULT_CREATE_OPTIONS from './options.js'
+import DYNAMIC_JSON from '@symbo.ls/init/dynamic.json' with { type: 'json' }
+import { createDomqlElement } from './createDomql.js'
 
 const mergeWithLocalFile = (options, optionsExternalFile) =>
   deepMerge(

package/src/initEmotion.js

@@ -5,7 +5,7 @@ import { emotion as defaultEmotion } from '@symbo.ls/emotion'
 import { init } from '@symbo.ls/init'
 import { deepClone, deepMerge } from '@domql/utils'
 
-import { DESIGN_SYSTEM_OPTIONS } from './options'
+import { DESIGN_SYSTEM_OPTIONS } from './options.js'
 import { DEFAULT_CONFIG } from '@symbo.ls/default-config'
 
 export const initEmotion = (key, options = {}) => {
@@ -15,10 +15,12 @@ export const initEmotion = (key, options = {}) => {
 
   if (!initOptions.emotion) initOptions.emotion = defaultEmotion
 
-  const registry = options.registry || transformDOMQLEmotion(initOptions.emotion, options)
-  const designSystem = (initOptions.useDefaultConfig || options.designSystem?.useDefaultConfig)
-    ? deepMerge(options.designSystem, deepClone(DEFAULT_CONFIG))
-    : options.designSystem || deepClone(DEFAULT_CONFIG)
+  const registry =
+    options.registry || transformDOMQLEmotion(initOptions.emotion, options)
+  const designSystem =
+    initOptions.useDefaultConfig || options.designSystem?.useDefaultConfig
+      ? deepMerge(options.designSystem, deepClone(DEFAULT_CONFIG))
+      : options.designSystem || deepClone(DEFAULT_CONFIG)
 
   const scratchSystem = init(designSystem, {
     key,

package/src/options.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { defaultDefine } from './define'
+import { defaultDefine } from './define.js'
 
 export const DESIGN_SYSTEM_OPTIONS = {
   useReset: true,

package/src/prepare.js

@@ -5,24 +5,26 @@ import {
   deepMerge,
   deepClone,
   merge,
+  isDevelopment,
   matchesComponentNaming
 } from '@domql/utils'
-import { initEmotion } from './initEmotion'
+import { initEmotion } from './initEmotion.js'
 
 import * as uikit from '@symbo.ls/uikit'
-import * as utils from './utilImports'
+import * as utils from './utilImports.js'
 import * as routerUtils from '@domql/router'
 
-const ENV = process.env.NODE_ENV
+// @preserve-env
 
-export const prepareWindow = (context) => {
-  if (typeof (window) === 'undefined') window = globalThis || {} // eslint-disable-line
-  if (typeof (document) === 'undefined') {
+export const prepareWindow = context => {
+  if (typeof window === 'undefined') window = globalThis || {} // eslint-disable-line
+  if (typeof document === 'undefined') {
     if (!window.document) window.document = globalThis.document || { body: {} }
     document = window.document // eslint-disable-line
   }
   context.document = context.document || document
-  return (context.window = context.window || window)
+  context.window = context.window || window
+  return context.window
 }
 
 function onlyDotsAndNumbers (str) {
@@ -44,52 +46,57 @@ export const UIkitWithPrefix = () => {
 }
 
 export const prepareComponents = context => {
-  return context.components ? { ...UIkitWithPrefix(), ...context.components } : UIkitWithPrefix()
+  return context.components
+    ? { ...UIkitWithPrefix(), ...context.components }
+    : UIkitWithPrefix()
 }
 
 export const prepareUtils = context => {
-  return { ...utils, ...routerUtils, ...utils.scratchUtils, ...context.utils, ...context.snippets, ...context.functions }
+  return {
+    ...utils,
+    ...routerUtils,
+    ...utils.scratchUtils,
+    ...context.utils,
+    ...context.snippets,
+    ...context.functions
+  }
 }
 
-export const prepareMethods = (context) => {
+export const prepareMethods = context => {
   return {
     ...(context.methods || {}),
     require: context.utils.require,
-    requireOnDemand: context.utils.requireOnDemand,
-    call: function (fnKey, ...args) {
-      return (context.utils[fnKey] || context.functions[fnKey] || context.methods[fnKey] || context.snippets[fnKey])?.call(this, ...args)
-    }
+    requireOnDemand: context.utils.requireOnDemand
   }
 }
 
 const cachedDeps = {}
-export const prepareDependencies = ({
+export const prepareDependencies = async ({
   dependencies,
   dependenciesOnDemand,
-  document
+  document,
+  preventCaching = false
 }) => {
   if (!dependencies || Object.keys(dependencies).length === 0) {
     return null
   }
 
   for (const [dependency, version] of Object.entries(dependencies)) {
-    if (version === 'loading' || version === 'error') {
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
       continue
     }
 
-    const random = ENV === 'development' ? `?${Math.random()}` : ''
+    const random = isDevelopment() && preventCaching ? `?${Math.random()}` : ''
     let url = `https://pkg.symbo.ls/${dependency}/${version}.js${random}`
 
     if (dependency.split('/').length > 2 || !onlyDotsAndNumbers(version)) {
       url = `https://pkg.symbo.ls/${dependency}${random}`
     }
 
-    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) continue
-
     try {
       if (cachedDeps[dependency]) return
       cachedDeps[dependency] = true
-      utils.loadJavascriptFileEmbedSync(url, document)
+      await utils.loadRemoteScript(url, { document })
     } catch (e) {
       console.error(`Failed to load ${dependency}:`, e)
     }
@@ -98,34 +105,39 @@ export const prepareDependencies = ({
   return dependencies
 }
 
-export const prepareRequire = (packages, ctx) => {
+export const prepareRequire = async (packages, ctx) => {
   const windowOpts = ctx.window || window
 
-  const initRequire = ctx => key => {
+  const initRequire = async ctx => async key => {
     const windowOpts = ctx.window || window
     const pkg = windowOpts.packages[key]
     if (typeof pkg === 'function') return pkg()
     return pkg
   }
 
-  const initRequireOnDemand = ctx => key => {
+  const initRequireOnDemand = async ctx => async key => {
     const { dependenciesOnDemand } = ctx
     const documentOpts = ctx.document || document
     const windowOpts = ctx.window || window
     if (!windowOpts.packages[key]) {
-      const random = ENV === 'development' ? `?${Math.random()}` : ''
+      const random = isDevelopment() ? `?${Math.random()}` : ''
       if (dependenciesOnDemand && dependenciesOnDemand[key]) {
         const version = dependenciesOnDemand[key]
         const url = `https://pkg.symbo.ls/${key}/${version}.js${random}`
-        ctx.utils.loadJavascriptFileEmbedSync(url, documentOpts)
+        await ctx.utils.loadRemoteScript(url, {
+          window: windowOpts,
+          document: documentOpts
+        })
       } else {
         const url = `https://pkg.symbo.ls/${key}${random}`
-        ctx.utils.loadJavascriptFileEmbedSync(url, documentOpts, d => {
-          windowOpts.packages[key] = 'loadedOnDeman'
+        await ctx.utils.loadRemoteScript(url, {
+          window: windowOpts,
+          document: documentOpts
         })
+        windowOpts.packages[key] = 'loadedOnDeman'
       }
     }
-    return windowOpts.require(key)
+    return await windowOpts.require(key)
   }
 
   if (windowOpts.packages) {
@@ -135,12 +147,12 @@ export const prepareRequire = (packages, ctx) => {
   }
 
   if (!windowOpts.require) {
-    ctx.utils.require = initRequire(ctx)
+    ctx.utils.require = await initRequire(ctx)
     windowOpts.require = ctx.utils.require
   }
 
   if (!windowOpts.requireOnDemand) {
-    ctx.utils.requireOnDemand = initRequireOnDemand(ctx)
+    ctx.utils.requireOnDemand = await initRequireOnDemand(ctx)
     windowOpts.requireOnDemand = ctx.utils.requireOnDemand
   }
 }

package/src/router.js

@@ -2,6 +2,7 @@
 
 import { router as defaultRouter } from '@domql/router'
 import { window, deepMerge, merge, isUndefined } from '@domql/utils'
+import { Link } from 'smbls'
 
 const DEFAULT_ROUTING_OPTIONS = {
   initRouter: true,
@@ -50,16 +51,24 @@ export const popStateRouter = (element, context) => {
   if (!routerOptions.popState) return
   const router =
     context.utils && context.utils.router ? context.utils.router : defaultRouter
-  window.onpopstate = e => {
+  window.onpopstate = async e => {
     const { pathname, search, hash } = window.location
     const url = pathname + search + hash
-    router(url, element, {}, { pushState: false, scrollToTop: false, level: 0 })
+    await router(
+      url,
+      element,
+      {},
+      { pushState: false, scrollToTop: false, level: 0, event: e }
+    )
   }
 }
 
 export const injectRouterInLinkComponent = (context, routerOptions) => {
-  const { Link, RouterLink } = context.components
+  const { components } = context
   if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-    return deepMerge(Link, RouterLink)
+    return deepMerge(
+      components['Link'] || components['smbls.Link'],
+      components['RouterLink'] || components['smbls.RouterLink']
+    )
   }
 }