@symbo.ls/create 2.27.18 → 2.28.2

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];
@@ -72,19 +75,22 @@ const createDomqlElement = async (app, ctx) => {
   if (!(0, import_utils.isObject)(app)) {
     app = {};
   }
-  prepareContext(app, ctx);
+  await prepareContext(app, ctx);
   app.extend = (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,36 +36,57 @@ __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 || {}
 );
 const create = (App, options = import_options.default, optionsExternalFile) => {
-  const redefinedOptions = { ...import_options.default, ...mergeWithLocalFile(options, optionsExternalFile) };
+  const redefinedOptions = {
+    ...import_options.default,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  };
   const domqlApp = (0, import_createDomql.createDomqlElement)(App, redefinedOptions);
   (0, import_router.popStateRouter)(domqlApp, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create) redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create)
+    redefinedOptions.on.create(
+      domqlApp,
+      domqlApp.state,
+      domqlApp.context,
+      redefinedOptions
+    );
   return domqlApp;
 };
 const createAsync = (App, options = import_options.default, optionsExternalFile) => {
   const domqlApp = create(App, options, optionsExternalFile);
-  const redefinedOptions = { ...import_options.default, ...mergeWithLocalFile(options, optionsExternalFile) };
+  const redefinedOptions = {
+    ...import_options.default,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  };
   const key = redefinedOptions.key;
   (0, import_ferchOnCreate.fetchAsync)(domqlApp, key, { utils, ...redefinedOptions });
   return domqlApp;
 };
 const createSync = async (App, options = import_options.default, optionsExternalFile) => {
-  const redefinedOptions = { ...import_options.default, ...mergeWithLocalFile(options, optionsExternalFile) };
+  const redefinedOptions = {
+    ...import_options.default,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  };
   const key = options.key;
   await (0, import_ferchOnCreate.fetchSync)(key, redefinedOptions);
   const domqlApp = await (0, import_createDomql.createDomqlElement)(App, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create) await redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create)
+    await redefinedOptions.on.create(
+      domqlApp,
+      domqlApp.state,
+      domqlApp.context,
+      redefinedOptions
+    );
   return domqlApp;
 };
 const createSkeleton = (App = {}, options = import_options.default, optionsExternalFile) => {

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,9 +41,9 @@ __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);
 // @preserve-env
 const prepareWindow = (context) => {
@@ -88,51 +88,47 @@ 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 (version === "loading" || version === "error" || dependenciesOnDemand && dependenciesOnDemand[dependency]) {
       continue;
     }
-    const random = (0, import_utils.isDevelopment)() ? `?${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;
@@ -141,15 +137,20 @@ const prepareRequire = (packages, ctx) => {
       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);
@@ -157,11 +158,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/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];
@@ -64,18 +72,21 @@ const createDomqlElement = async (app, ctx) => {
   if (!isObject(app)) {
     app = {};
   }
-  prepareContext(app, ctx);
+  await prepareContext(app, ctx);
   app.extend = 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 || {}
@@ -29,7 +29,13 @@ const create = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
   const redefinedOptions = __spreadValues(__spreadValues({}, DEFAULT_CREATE_OPTIONS), mergeWithLocalFile(options, optionsExternalFile));
   const domqlApp = createDomqlElement(App, redefinedOptions);
   popStateRouter(domqlApp, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create) redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create)
+    redefinedOptions.on.create(
+      domqlApp,
+      domqlApp.state,
+      domqlApp.context,
+      redefinedOptions
+    );
   return domqlApp;
 };
 const createAsync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
@@ -44,7 +50,13 @@ const createSync = async (App, options = DEFAULT_CREATE_OPTIONS, optionsExternal
   const key = options.key;
   await fetchSync(key, redefinedOptions);
   const domqlApp = await createDomqlElement(App, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create) await redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create)
+    await redefinedOptions.on.create(
+      domqlApp,
+      domqlApp.state,
+      domqlApp.context,
+      redefinedOptions
+    );
   return domqlApp;
 };
 const createSkeleton = (App = {}, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {

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

@@ -25,9 +25,9 @@ import {
   checkIfKeyIsComponent,
   isDevelopment
 } 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";
 // @preserve-env
 const prepareWindow = (context) => {
@@ -64,51 +64,47 @@ 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 (version === "loading" || version === "error" || dependenciesOnDemand && dependenciesOnDemand[dependency]) {
       continue;
     }
-    const random = isDevelopment() ? `?${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;
@@ -117,15 +113,20 @@ const prepareRequire = (packages, ctx) => {
       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);
@@ -133,11 +134,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/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.27.18",
+  "version": "2.28.2",
   "license": "MIT",
-  "gitHead": "0d6418dd1eabd119d4ef1b6bb07b7733151878a5",
+  "gitHead": "3c5e8b68269799a0e2382f9c79c51e41f33863bf",
   "type": "module",
   "module": "src/index.js",
   "main": "src/index.js",
@@ -29,17 +29,17 @@
     "prepublish": "npm run build; npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/emotion": "^2.27.18",
-    "@domql/event": "^2.27.18",
-    "@domql/report": "^2.27.18",
-    "@domql/router": "^2.27.18",
-    "@symbo.ls/fetch": "^2.27.18",
-    "@symbo.ls/init": "^2.27.18",
-    "@symbo.ls/scratch": "^2.27.18",
-    "@symbo.ls/sync": "^2.27.18",
-    "@symbo.ls/uikit": "^2.27.18",
-    "@symbo.ls/utils": "^2.27.18",
-    "domql": "^2.27.18"
+    "@domql/emotion": "^2.28.2",
+    "@domql/event": "^2.28.2",
+    "@domql/report": "^2.28.2",
+    "@domql/router": "^2.28.2",
+    "@symbo.ls/fetch": "^2.28.2",
+    "@symbo.ls/init": "^2.28.2",
+    "@symbo.ls/scratch": "^2.28.2",
+    "@symbo.ls/sync": "^2.28.2",
+    "@symbo.ls/uikit": "^2.28.2",
+    "@symbo.ls/utils": "^2.28.2",
+    "domql": "^2.28.2"
   },
   "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]
@@ -56,7 +64,7 @@ export const createDomqlElement = async (app, ctx) => {
     app = {}
   }
 
-  prepareContext(app, ctx)
+  await prepareContext(app, ctx)
 
   app.extend = initializeExtend(app, ctx)
   app.routes = ctx.pages
@@ -65,12 +73,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,36 +2,57 @@
 
 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(
-  options,
-  isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
-)
+const mergeWithLocalFile = (options, optionsExternalFile) =>
+  deepMerge(
+    options,
+    isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
+  )
 
-export const create = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
-  const redefinedOptions = { ...DEFAULT_CREATE_OPTIONS, ...mergeWithLocalFile(options, optionsExternalFile) }
+export const create = (
+  App,
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  }
 
   const domqlApp = createDomqlElement(App, redefinedOptions)
 
   popStateRouter(domqlApp, redefinedOptions)
 
-  if (redefinedOptions.on && redefinedOptions.on.create) redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions)
+  if (redefinedOptions.on && redefinedOptions.on.create)
+    redefinedOptions.on.create(
+      domqlApp,
+      domqlApp.state,
+      domqlApp.context,
+      redefinedOptions
+    )
 
   return domqlApp
 }
 
-export const createAsync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
+export const createAsync = (
+  App,
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
   const domqlApp = create(App, options, optionsExternalFile)
 
-  const redefinedOptions = { ...DEFAULT_CREATE_OPTIONS, ...mergeWithLocalFile(options, optionsExternalFile) }
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  }
   // const SYMBOLS_KEY = process.env.SYMBOLS_KEY
   const key = redefinedOptions.key
   fetchAsync(domqlApp, key, { utils, ...redefinedOptions })
@@ -39,20 +60,37 @@ export const createAsync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExtern
   return domqlApp
 }
 
-export const createSync = async (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
-  const redefinedOptions = { ...DEFAULT_CREATE_OPTIONS, ...mergeWithLocalFile(options, optionsExternalFile) }
+export const createSync = async (
+  App,
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  }
 
   // const SYMBOLS_KEY = process.env.SYMBOLS_KEY
   const key = options.key
   await fetchSync(key, redefinedOptions)
 
   const domqlApp = await createDomqlElement(App, redefinedOptions)
-  if (redefinedOptions.on && redefinedOptions.on.create) await (redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions))
+  if (redefinedOptions.on && redefinedOptions.on.create)
+    await redefinedOptions.on.create(
+      domqlApp,
+      domqlApp.state,
+      domqlApp.context,
+      redefinedOptions
+    )
 
   return domqlApp
 }
 
-export const createSkeleton = (App = {}, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
+export const createSkeleton = (
+  App = {},
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
   return create(
     {
       deps: { isUndefined },

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

@@ -8,10 +8,10 @@ import {
   checkIfKeyIsComponent,
   isDevelopment
 } 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'
 
 // @preserve-env
@@ -65,46 +65,41 @@ 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 (
+      version === 'loading' ||
+      version === 'error' ||
+      (dependenciesOnDemand && dependenciesOnDemand[dependency])
+    ) {
       continue
     }
 
-    const random = isDevelopment() ? `?${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)
     }
@@ -113,17 +108,17 @@ 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
@@ -132,15 +127,20 @@ export const prepareRequire = (packages, ctx) => {
       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) {
@@ -150,12 +150,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
   }
 }