@symbo.ls/create 2.11.444 → 2.11.447

package/dist/cjs/createDomql.js

@@ -28,65 +28,73 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var createDomql_exports = {};
 __export(createDomql_exports, {
-  createDomqlElement: () => createDomqlElement
+  createDomqlElement: () => createDomqlElement,
+  prepareContext: () => prepareContext
 });
 module.exports = __toCommonJS(createDomql_exports);
 var import_domql = __toESM(require("domql"), 1);
-var import_utils = require("@domql/utils");
 var uikit = __toESM(require("@symbo.ls/uikit"), 1);
+var import_utils = require("@domql/utils");
 var import_define = require("./define");
 var import_router = require("./router");
 var import_syncExtend = require("./syncExtend");
 var import_prepare = require("./prepare");
 const SYMBOLS_KEY = process.env.SYMBOLS_KEY;
-const createDomqlElement = (App, options) => {
-  const key = options.key || SYMBOLS_KEY || ((0, import_utils.isString)(App) ? App : "");
-  const [scratcDesignSystem, emotion, registry] = (0, import_prepare.prepareDesignSystem)(options, key);
-  if ((0, import_utils.isString)(App))
-    App = {};
-  const doc = (0, import_prepare.prepareDocument)(options);
-  const state = (0, import_prepare.prepareState)(options, App);
-  const pages = (0, import_prepare.preparePages)(options);
-  const components = (0, import_prepare.prepareComponents)(options);
-  const designSystem = scratcDesignSystem;
-  const snippets = (0, import_prepare.prepareUtils)(options);
-  const dependencies = (0, import_prepare.prepareDependencies)(options);
-  (0, import_prepare.preparePackages)({ functions: snippets, utils: snippets, snippets, ...options.files }, options);
-  const frameListeners = (0, import_prepare.prepareAnimationFrame)(options);
-  const define = options.define || import_define.defaultDefine;
-  const routerOptions = (0, import_router.initRouter)(App, options);
-  const extend = (0, import_syncExtend.applySyncDebug)([App], options);
-  return (import_domql.default.default && import_domql.default.default.create || import_domql.default.create)({
-    extend,
-    routes: options.pages,
-    state,
-    data: {
-      frameListeners
-    },
-    context: {
-      key,
-      components,
-      state,
-      pages,
-      designSystem,
-      snippets,
-      dependencies,
-      functions: options.functions,
-      files: options.files,
-      utils: snippets,
-      schema: options.schema,
-      define,
-      registry,
-      emotion,
-      routerOptions,
-      socket: options.socket,
-      editor: options.editor,
-      window: options.window || window,
-      document: doc
-    }
-  }, options.parent || doc.body, key, {
-    extend: [uikit.Box],
-    verbose: options.verbose,
-    ...options.domqlOptions
+const prepareContext = (app, context = {}) => {
+  const key = context.key = context.key || SYMBOLS_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);
+  context.designSystem = scratcDesignSystem;
+  context.registry = registry;
+  context.emotion = emotion;
+  const state = (0, import_prepare.prepareState)(app, context);
+  context.state = state;
+  context.pages = (0, import_prepare.preparePages)(app, context);
+  context.components = (0, import_prepare.prepareComponents)(context);
+  context.utils = (0, import_prepare.prepareUtils)(context);
+  context.snippets = context.utils;
+  context.dependencies = (0, import_prepare.prepareDependencies)(context);
+  context.methods = (0, import_prepare.prepareMethods)(context);
+  context.routerOptions = (0, import_router.initRouter)(app, context);
+  context.defaultExtends = [uikit.Box];
+  return context;
+};
+const createDomqlElement = (app, ctx) => {
+  if (!(0, import_utils.isObject)(ctx))
+    ctx = {};
+  if ((0, import_utils.isNode)(app)) {
+    app = {};
+    ctx.parent = app;
+  }
+  if ((0, import_utils.isString)(app)) {
+    app = {};
+    ctx.key = app;
+  }
+  if (!(0, import_utils.isObject)(app)) {
+    app = {};
+  }
+  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_prepare.initAnimationFrame)();
+  (0, import_prepare.prepareRequire)({
+    functions: ctx.snippets,
+    utils: ctx.snippets,
+    snippets: ctx.snippets,
+    ...ctx.files
+  }, ctx);
+  (0, import_syncExtend.initializeSync)(app, ctx);
+  (0, import_syncExtend.initializeInspect)(app, ctx);
+  (0, import_syncExtend.initializeNotifications)(app, ctx);
+  const parentNode = ctx.parent || ctx.document.body;
+  const domqlCreate = import_domql.default.default && import_domql.default.default.create || import_domql.default.create;
+  const smblsApp = domqlCreate(app, parentNode, ctx.key, {
+    verbose: ctx.verbose,
+    ...ctx.domqlOptions
   });
+  return smblsApp;
 };

package/dist/cjs/index.js

@@ -39,7 +39,6 @@ var import_utils = require("@domql/utils");
 var utils = __toESM(require("./utilImports"), 1);
 var import_router = require("./router");
 var import_ferchOnCreate = require("./ferchOnCreate");
-var import_syncExtend = require("./syncExtend");
 var import_options = __toESM(require("./options"), 1);
 var import_dynamic = __toESM(require("@symbo.ls/init/dynamic.json"), 1);
 var import_createDomql = require("./createDomql");
@@ -51,7 +50,6 @@ const mergeWithLocalFile = (options, optionsExternalFile) => (0, import_utils.de
 const create = (App, options = import_options.default, optionsExternalFile) => {
   const redefinedOptions = { ...import_options.default, ...mergeWithLocalFile(options, optionsExternalFile) };
   const domqlApp = (0, import_createDomql.createDomqlElement)(App, redefinedOptions);
-  (0, import_syncExtend.applyInspectListener)(domqlApp, redefinedOptions);
   (0, import_router.popStateRouter)(domqlApp, redefinedOptions);
   if (redefinedOptions.on && redefinedOptions.on.create)
     redefinedOptions.on.create(domqlApp, redefinedOptions);

package/dist/cjs/prepare.js

@@ -29,25 +29,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var prepare_exports = {};
 __export(prepare_exports, {
   UIkitWithPrefix: () => UIkitWithPrefix,
-  prepareAnimationFrame: () => prepareAnimationFrame,
+  initAnimationFrame: () => initAnimationFrame,
   prepareComponents: () => prepareComponents,
   prepareDependencies: () => prepareDependencies,
   prepareDesignSystem: () => prepareDesignSystem,
-  prepareDocument: () => prepareDocument,
-  preparePackages: () => preparePackages,
+  prepareMethods: () => prepareMethods,
   preparePages: () => preparePages,
+  prepareRequire: () => prepareRequire,
   prepareState: () => prepareState,
-  prepareUtils: () => prepareUtils
+  prepareUtils: () => prepareUtils,
+  prepareWindow: () => prepareWindow
 });
 module.exports = __toCommonJS(prepare_exports);
 var import_utils = require("@domql/utils");
 var import_initEmotion = require("./initEmotion");
 var uikit = __toESM(require("@symbo.ls/uikit"), 1);
 var utils = __toESM(require("./utilImports"), 1);
+const ENV = "development";
+const prepareWindow = (context) => {
+  if (typeof window === "undefined")
+    window = globalThis || {};
+  if (typeof document === "undefined") {
+    if (!window.document)
+      window.document = globalThis.document || { body: {} };
+    document = window.document;
+  }
+  context.document = context.document || document;
+  return context.window = context.window || window;
+};
 function onlyDotsAndNumbers(str) {
   return /^[0-9.]+$/.test(str) && str !== "";
 }
-const ENV = "development";
 const UIkitWithPrefix = () => {
   const newObj = {};
   for (const key in uikit) {
@@ -61,14 +73,28 @@ const UIkitWithPrefix = () => {
   }
   return newObj;
 };
-const prepareComponents = (options) => {
-  return options.components ? { ...UIkitWithPrefix(), ...options.components } : UIkitWithPrefix();
+const prepareComponents = (context) => {
+  return context.components ? { ...UIkitWithPrefix(), ...context.components } : UIkitWithPrefix();
 };
-const prepareUtils = (options) => {
-  return { ...utils, ...utils.scratchUtils, ...options.snippets || options.utils || options.functions || {} };
+const prepareUtils = (context) => {
+  return { ...utils, ...utils.scratchUtils, ...context.snippets || context.utils || context.functions || {} };
+};
+const prepareMethods = (context) => {
+  return {
+    ...context.methods || {},
+    require: context.utils.require,
+    requireOnDemand: context.utils.requireOnDemand,
+    call: function(fnKey, ...args) {
+      return (context.utils[fnKey] || context.methods[fnKey]).call(this, ...args);
+    }
+  };
 };
 const cachedDeps = {};
-const prepareDependencies = ({ packages: dependencies, dependenciesOnDemand, document: document2 }) => {
+const prepareDependencies = ({
+  packages: dependencies,
+  dependenciesOnDemand,
+  document: document2
+}) => {
   if (!dependencies || Object.keys(dependencies).length === 0) {
     return null;
   }
@@ -94,90 +120,82 @@ const prepareDependencies = ({ packages: dependencies, dependenciesOnDemand, doc
   }
   return dependencies;
 };
-const preparePackages = (packages, opts) => {
-  const windowOpts = opts.window || window;
+const prepareRequire = (packages, ctx) => {
+  const windowOpts = ctx.window || window;
+  const initRequire = (ctx2) => (key) => {
+    const windowOpts2 = ctx2.window || window;
+    const pkg = windowOpts2.packages[key];
+    if (typeof pkg === "function")
+      return pkg();
+    return pkg;
+  };
+  const initRequireOnDemand = (ctx2) => (key) => {
+    const { dependenciesOnDemand } = ctx2;
+    const documentOpts = ctx2.document || document;
+    const windowOpts2 = ctx2.window || window;
+    if (!windowOpts2.packages[key]) {
+      const random = ENV === "development" ? `?${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);
+      } else {
+        const url = `https://pkg.symbo.ls/${key}${random}`;
+        ctx2.utils.loadJavascriptFileEmbedSync(url, documentOpts, (d) => {
+          windowOpts2.packages[key] = "loadedOnDeman";
+          console.log(d);
+        });
+      }
+    }
+    return windowOpts2.require(key);
+  };
   if (windowOpts.packages) {
     windowOpts.packages = (0, import_utils.merge)(windowOpts.packages, packages);
   } else {
     windowOpts.packages = packages;
   }
   if (!windowOpts.require) {
-    windowOpts.require = (key) => {
-      const pkg = windowOpts.packages[key];
-      if (typeof pkg === "function")
-        return pkg();
-      return pkg;
-    };
+    ctx.utils.require = initRequire(ctx);
+    windowOpts.require = ctx.utils.require;
   }
   if (!windowOpts.requireOnDemand) {
-    windowOpts.requireOnDemand = (key) => {
-      const { dependenciesOnDemand, document: document2 } = opts;
-      if (!windowOpts.packages[key]) {
-        const random = ENV === "development" ? `?${Math.random()}` : "";
-        if (dependenciesOnDemand && dependenciesOnDemand[key]) {
-          const version = dependenciesOnDemand[key];
-          const url = `https://pkg.symbo.ls/${key}/${version}.js${random}`;
-          utils.loadJavascriptFileEmbedSync(url, document2);
-        } else {
-          const url = `https://pkg.symbo.ls/${key}${random}`;
-          utils.loadJavascriptFileEmbedSync(url, document2, (d) => {
-            windowOpts.packages[key] = "loadedOnDeman";
-            console.log(d);
-          });
-        }
-      }
-      return windowOpts.require(key);
-    };
+    ctx.utils.requireOnDemand = initRequireOnDemand(ctx);
+    windowOpts.requireOnDemand = ctx.utils.requireOnDemand;
   }
 };
-const prepareDesignSystem = (options, key) => {
-  const [scratcDesignhSystem, emotion, registry] = (0, import_initEmotion.initEmotion)(key, options);
+const prepareDesignSystem = (key, context) => {
+  const [scratcDesignhSystem, emotion, registry] = (0, import_initEmotion.initEmotion)(key, context);
   return [scratcDesignhSystem, emotion, registry];
 };
-const prepareState = (options, App) => {
+const prepareState = (app, context) => {
   const state = {};
-  if (options.state)
-    utils.deepMerge(state, options.state);
-  if (App && App.state)
-    (0, import_utils.deepMerge)(state, App.state);
+  if (context.state)
+    utils.deepMerge(state, context.state);
+  if (app && app.state)
+    (0, import_utils.deepMerge)(state, app.state);
   return (0, import_utils.deepCloneWithExtend)(state);
 };
-const preparePages = (options) => {
-  const pages = options.pages;
-  Object.keys(options.pages).filter((v) => !v.startsWith("/")).forEach((v) => {
-    if (v === "main")
-      pages["/"] = options.pages.main;
-    else {
-      pages["/" + v] = options.pages[v];
-    }
-  });
-  options.pages = pages;
-  return pages;
-};
-const prepareDocument = (options) => {
-  if (typeof document === "undefined") {
-    if (typeof window === "undefined")
-      window = {};
-    if (!window.document)
-      window.document = { body: {} };
-    document = window.document;
+const preparePages = (app, context) => {
+  if ((0, import_utils.isObject)(app.routes) && (0, import_utils.isObject)(context.pages)) {
+    (0, import_utils.merge)(app.routes, context.pages);
   }
-  if (!options.window)
-    options.window = window;
-  if (!options.document)
-    options.document = document;
-  return options.parent || options.document || document;
+  const pages = app.routes || context.pages || {};
+  return Object.keys(pages).filter((v) => !v.startsWith("/")).reduce((pages2, v) => {
+    const index = v === "index" ? "" : v;
+    pages2["/" + index] = pages2[v];
+    delete pages2[v];
+    return pages2;
+  }, pages);
 };
-const prepareAnimationFrame = (opts) => {
+const initAnimationFrame = () => {
   const frameListeners = /* @__PURE__ */ new Set();
   function requestFrame() {
-    var _a;
-    for (const el of frameListeners) {
-      if (!((_a = el.node) == null ? void 0 : _a.parentNode)) {
-        frameListeners.delete(el);
+    for (const element of frameListeners) {
+      if (!document.body.contains(element.node)) {
+        frameListeners.delete(element);
       } else {
         try {
-          (el.on.frame || el.props.onFrame)(el, el.state, el.context);
+          (element.on.frame || element.props.onFrame)(element, element.state, element.context);
         } catch (e) {
           console.warn(e);
         }

package/dist/cjs/router.js

@@ -31,15 +31,15 @@ const DEFAULT_ROUTING_OPTIONS = {
   injectRouterInLinkComponent: true,
   popState: true
 };
-const initRouter = (element, options) => {
-  if (options.router === false)
+const initRouter = (element, context) => {
+  if (context.router === false)
     return;
-  else if (options.router === true)
-    options.router = DEFAULT_ROUTING_OPTIONS;
+  else if (context.router === true)
+    context.router = DEFAULT_ROUTING_OPTIONS;
   else
-    (0, import_utils.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS);
-  const routerOptions = options.router;
-  const router = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
+    (0, import_utils.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS);
+  const routerOptions = context.router;
+  const router = context.snippets && context.snippets.router ? context.snippets.router : import_router.router;
   const onRouterRenderDefault = (el, s) => {
     const { pathname, search, hash } = import_utils.window.location;
     const url = pathname + search + hash;
@@ -60,14 +60,14 @@ const initRouter = (element, options) => {
   return routerOptions;
 };
 let popStateFired;
-const popStateRouter = (element, options) => {
+const popStateRouter = (element, context) => {
   if (popStateFired)
     return;
   popStateFired = true;
-  const routerOptions = options.router || DEFAULT_ROUTING_OPTIONS;
+  const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
   if (!routerOptions.popState)
     return;
-  const router = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
+  const router = context.snippets && context.snippets.router ? context.snippets.router : import_router.router;
   import_utils.window.onpopstate = (e) => {
     const { pathname, search, hash } = import_utils.window.location;
     const url = pathname + search + hash;

package/dist/cjs/syncExtend.js

@@ -18,29 +18,40 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var syncExtend_exports = {};
 __export(syncExtend_exports, {
-  applyInspectListener: () => applyInspectListener,
-  applySyncDebug: () => applySyncDebug
+  initializeExtend: () => initializeExtend,
+  initializeInspect: () => initializeInspect,
+  initializeNotifications: () => initializeNotifications,
+  initializeSync: () => initializeSync
 });
 module.exports = __toCommonJS(syncExtend_exports);
-var import_socket_ui = require("@symbo.ls/socket-ui");
 var import_utils = require("@domql/utils");
-const applySyncDebug = (extend, options) => {
-  const { editor } = options;
+var import_sync = require("@symbo.ls/sync");
+var import_Inspect = require("@symbo.ls/sync/Inspect");
+var import_Notifications = require("@symbo.ls/sync/Notifications");
+const initializeExtend = (app, ctx) => {
+  return (0, import_utils.isObjectLike)(app.extend) ? app.extend : {};
+};
+const initializeSync = (app, ctx) => {
+  const { editor } = ctx;
   if (!editor)
-    return extend;
-  const inspect = (0, import_utils.isUndefined)(editor.inspect) ? (0, import_utils.isDevelopment)() : editor.inspect;
-  if (inspect)
-    extend.push(import_socket_ui.DevFocus);
+    return;
   const liveSync = (0, import_utils.isUndefined)(editor.liveSync) ? (0, import_utils.isDevelopment)() : editor.liveSync;
   if (liveSync)
-    extend.push(import_socket_ui.Sync);
-  return extend;
+    app.extend.push(import_sync.SyncComponent);
 };
-const applyInspectListener = (root, options) => {
-  const { editor } = options;
+const initializeInspect = (app, ctx) => {
+  const { editor } = ctx;
   if (!editor)
     return;
   const inspect = (0, import_utils.isUndefined)(editor.inspect) ? (0, import_utils.isDevelopment)() : editor.inspect;
   if (inspect)
-    (0, import_socket_ui.inspectOnKey)(root, options);
+    app.extend.push(import_Inspect.Inspect);
+};
+const initializeNotifications = (app, ctx) => {
+  const { editor } = ctx;
+  if (!editor)
+    return;
+  const verbose = (0, import_utils.isUndefined)(editor.verbose) ? (0, import_utils.isDevelopment)() || ctx.verbose : editor.verbose;
+  if (verbose)
+    app.extend.push(import_Notifications.Notifications);
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.444",
+  "version": "2.11.447",
   "license": "MIT",
-  "gitHead": "15341106596c691381dac4b475c44d53557786e8",
+  "gitHead": "e59d0443eec7f94e5737a916d49daf00d1ee9c47",
   "files": [
     "src",
     "dist"
@@ -31,16 +31,15 @@
     "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
   },
   "dependencies": {
-    "@domql/emotion": "latest",
-    "@domql/report": "latest",
-    "@domql/router": "latest",
-    "@domql/utils": "latest",
-    "@symbo.ls/fetch": "latest",
-    "@symbo.ls/init": "latest",
-    "@symbo.ls/scratch": "latest",
-    "@symbo.ls/socket-ui": "latest",
-    "@symbo.ls/uikit": "latest",
-    "@symbo.ls/utils": "latest",
+    "@domql/emotion": "^2.5.0",
+    "@domql/report": "^2.5.0",
+    "@domql/router": "^2.5.0",
+    "@symbo.ls/fetch": "^2.11.446",
+    "@symbo.ls/init": "^2.11.446",
+    "@symbo.ls/scratch": "^2.11.446",
+    "@symbo.ls/sync": "^2.11.447",
+    "@symbo.ls/uikit": "^2.11.447",
+    "@symbo.ls/utils": "^2.11.446",
     "domql": "^2.5.0"
   },
   "devDependencies": {

package/src/createDomql.js

@@ -1,79 +1,89 @@
 'use strict'
 
 import DOM from 'domql'
-import { isString } from '@domql/utils'
-
 import * as uikit from '@symbo.ls/uikit'
 
+import { isString, isNode, isObject } from '@domql/utils'
 import { defaultDefine } from './define'
 import { initRouter } from './router'
-import { applySyncDebug } from './syncExtend'
+import { initializeExtend, initializeInspect, initializeNotifications, initializeSync } from './syncExtend'
+
 import {
-  prepareAnimationFrame,
+  initAnimationFrame,
   prepareComponents,
   prepareDependencies,
   prepareDesignSystem,
-  prepareDocument,
-  preparePackages,
+  prepareWindow,
+  prepareRequire,
   preparePages,
   prepareState,
-  prepareUtils
+  prepareUtils,
+  prepareMethods
 } from './prepare'
 
 const SYMBOLS_KEY = process.env.SYMBOLS_KEY
 
-export const createDomqlElement = (App, options) => {
-  const key = options.key || SYMBOLS_KEY || (isString(App) ? App : '')
-  const [scratcDesignSystem, emotion, registry] = prepareDesignSystem(options, key)
-  if (isString(App)) App = {}
+export const prepareContext = (app, context = {}) => {
+  const key = context.key = context.key || SYMBOLS_KEY || (isString(app) ? app : 'smblsapp')
+  context.define = context.define || defaultDefine
+  context.window = prepareWindow(context)
+  const [scratcDesignSystem, emotion, registry] = prepareDesignSystem(key, context)
+  context.designSystem = scratcDesignSystem
+  context.registry = registry
+  context.emotion = emotion
+  const state = prepareState(app, context)
+  context.state = state
+  context.pages = preparePages(app, context)
+  context.components = prepareComponents(context)
+  context.utils = prepareUtils(context)
+  context.snippets = context.utils
+  context.dependencies = prepareDependencies(context)
+  context.methods = prepareMethods(context)
+  context.routerOptions = initRouter(app, context)
+  context.defaultExtends = [uikit.Box]
+  return context
+}
 
-  const doc = prepareDocument(options)
-  const state = prepareState(options, App)
-  const pages = preparePages(options)
-  const components = prepareComponents(options)
-  const designSystem = scratcDesignSystem
-  const snippets = prepareUtils(options)
-  const dependencies = prepareDependencies(options)
-  preparePackages({ functions: snippets, utils: snippets, snippets, ...options.files }, options)
+export const createDomqlElement = (app, ctx) => {
+  if (!isObject(ctx)) ctx = {}
+  if (isNode(app)) {
+    app = {}
+    ctx.parent = app
+  }
+  if (isString(app)) {
+    app = {}
+    ctx.key = app
+  }
+  if (!isObject(app)) {
+    app = {}
+  }
 
-  const frameListeners = prepareAnimationFrame(options)
+  prepareContext(app, ctx)
 
-  const define = options.define || defaultDefine
+  app.extend = initializeExtend(app, ctx)
+  app.routes = ctx.pages
+  app.state = ctx.state
+  app.context = ctx
+  app.data = app.data || {}
+  app.data.frameListeners = initAnimationFrame()
 
-  const routerOptions = initRouter(App, options) // eslint-disable-line
-  const extend = applySyncDebug([App], options)
+  prepareRequire({
+    functions: ctx.snippets,
+    utils: ctx.snippets,
+    snippets: ctx.snippets,
+    ...ctx.files
+  }, ctx)
 
-  return ((DOM.default && DOM.default.create) || DOM.create)({
-    extend,
-    routes: options.pages,
-    state,
-    data: {
-      frameListeners
-    },
-    context: {
-      key,
-      components,
-      state,
-      pages,
-      designSystem,
-      snippets,
-      dependencies,
-      functions: options.functions,
-      files: options.files,
-      utils: snippets,
-      schema: options.schema,
-      define,
-      registry,
-      emotion,
-      routerOptions,
-      socket: options.socket,
-      editor: options.editor,
-      window: options.window || window,
-      document: doc
-    }
-  }, options.parent || doc.body, key, {
-    extend: [uikit.Box],
-    verbose: options.verbose,
-    ...options.domqlOptions
+  initializeSync(app, ctx)
+  initializeInspect(app, ctx)
+  initializeNotifications(app, ctx)
+
+  const parentNode = ctx.parent || ctx.document.body
+  const domqlCreate = (DOM.default && DOM.default.create) || DOM.create
+  const smblsApp = domqlCreate(app, parentNode, ctx.key, {
+    verbose: ctx.verbose,
+    ...ctx.domqlOptions
   })
+
+  return smblsApp
 }

package/src/index.js

@@ -6,7 +6,6 @@ import * as utils from './utilImports'
 
 import { popStateRouter } from './router'
 import { fetchAsync, fetchSync } from './ferchOnCreate'
-import { applyInspectListener } from './syncExtend'
 
 import DEFAULT_CREATE_OPTIONS from './options'
 import DYNAMIC_JSON from '@symbo.ls/init/dynamic.json'
@@ -24,7 +23,6 @@ export const create = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFil
 
   const domqlApp = createDomqlElement(App, redefinedOptions)
 
-  applyInspectListener(domqlApp, redefinedOptions)
   popStateRouter(domqlApp, redefinedOptions)
 
   if (redefinedOptions.on && redefinedOptions.on.create) redefinedOptions.on.create(domqlApp, redefinedOptions)