smbls 3.1.2 → 3.2.7

package/dist/esm/src/index.js

@@ -0,0 +1,78 @@
+import { deepMerge, isObject, isUndefined } from "@domql/utils";
+import * as utils from "./utilImports.js";
+import { onpopstateRouter } from "./router.js";
+import { fetchAsync, fetchSync } from "./fetchOnCreate.js";
+import DEFAULT_CREATE_OPTIONS from "./options.js";
+import DYNAMIC_JSON from "../dynamic.json";
+import { createDomqlElement } from "./createDomql.js";
+const mergeWithLocalFile = (options, optionsExternalFile) => deepMerge(
+  options,
+  isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
+);
+const create = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  };
+  const domqlApp = createDomqlElement(App, redefinedOptions).then((App2) => {
+    onpopstateRouter(App2, 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) => {
+  const domqlApp = create(App, options, optionsExternalFile);
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  };
+  const key = redefinedOptions.key;
+  fetchAsync(domqlApp, key, { utils, ...redefinedOptions });
+  return domqlApp;
+};
+const createSync = async (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  };
+  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
+    );
+  return domqlApp;
+};
+const createSkeleton = (App = {}, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
+  return create(
+    {
+      deps: { isUndefined },
+      ...App
+    },
+    deepMerge({ domqlOptions: { onlyResolveExtends: true } }, options),
+    optionsExternalFile
+  );
+};
+var src_default = create;
+export * from "./init.js";
+import { DEFAULT_CONTEXT, DESIGN_SYSTEM_OPTIONS, ROUTER_OPTIONS } from "./options.js";
+export {
+  DEFAULT_CONTEXT,
+  DESIGN_SYSTEM_OPTIONS,
+  ROUTER_OPTIONS,
+  create,
+  createAsync,
+  createSkeleton,
+  createSync,
+  src_default as default
+};

package/dist/esm/src/init.js

@@ -0,0 +1,103 @@
+import {
+  set,
+  getActiveConfig,
+  getFontFaceString,
+  appendSVGSprite,
+  appendSvgIconsSprite
+} from "@symbo.ls/scratch";
+import { isObject, deepMerge, deepClone } from "@domql/utils";
+import { emotion as defaultEmotion } from "@symbo.ls/emotion";
+import DYNAMIC_JSON from "../dynamic.json";
+const CONFIG = getActiveConfig();
+const mergeWithLocalFile = (config = CONFIG, options) => {
+  const rcfile = isObject(options.localFile) ? options.localFile : DYNAMIC_JSON || {};
+  const clonedFile = deepClone(rcfile.designSystem || {});
+  return deepMerge(config, clonedFile);
+};
+const SET_OPTIONS = {
+  emotion: defaultEmotion,
+  useVariable: true,
+  useReset: true,
+  useFontImport: true,
+  useIconSprite: true,
+  useDocumentTheme: true,
+  useSvgSprite: true
+};
+const init = (config, options = SET_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion;
+  const resultConfig = mergeWithLocalFile(config || {}, options);
+  const conf = set(
+    {
+      verbose: options.verbose,
+      useReset: options.useReset,
+      useFontImport: options.useFontImport,
+      useVariable: options.useVariable,
+      useSvgSprite: options.useSvgSprite,
+      useDocumentTheme: options.useDocumentTheme,
+      useIconSprite: options.useIconSprite,
+      useDefaultConfig: options.useDefaultConfig,
+      globalTheme: options.globalTheme,
+      ...resultConfig
+    },
+    { newConfig: options.newConfig }
+  );
+  const FontFace = getFontFaceString(conf.FONT);
+  const useReset = conf.useReset;
+  const useVariable = conf.useVariable;
+  const useFontImport = conf.useFontImport;
+  const useSvgSprite = conf.useSvgSprite;
+  const hasSvgs = config.svg || config.SVG;
+  const useIconSprite = conf.useIconSprite;
+  const hasIcons = config.icons || config.ICONS;
+  if (useFontImport) emotion.injectGlobal(FontFace);
+  if (useVariable) emotion.injectGlobal({ ":root": conf.CSS_VARS });
+  if (useReset) emotion.injectGlobal(conf.RESET);
+  if (conf.ANIMATION) {
+    const keyframesCSS = {};
+    for (const name in conf.ANIMATION) {
+      keyframesCSS[`@keyframes ${name}`] = conf.ANIMATION[name];
+    }
+    emotion.injectGlobal(keyframesCSS);
+  }
+  if (hasSvgs) appendSVGSprite(hasSvgs, { document: options.document });
+  else if (useSvgSprite)
+    appendSVGSprite(conf.SVG, { document: options.document });
+  if (hasIcons) appendSvgIconsSprite(hasIcons, { document: options.document });
+  else if (useIconSprite)
+    appendSvgIconsSprite(conf.ICONS, { document: options.document });
+  return conf;
+};
+const UPDATE_OPTIONS = {
+  emotion: defaultEmotion
+};
+const reinit = (config, options = UPDATE_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion;
+  const resultConfig = mergeWithLocalFile(config || {}, options);
+  const conf = set({
+    verbose: false,
+    ...resultConfig
+  });
+  if (!options.preventInject) {
+    emotion.injectGlobal({ ":root": conf.CSS_VARS });
+    emotion.injectGlobal(conf.RESET);
+  }
+  return conf;
+};
+const applyCSS = (styles, options = UPDATE_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion;
+  emotion.injectGlobal(styles);
+};
+const updateVars = (config, options = UPDATE_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion;
+  emotion.injectGlobal({ ":root": config.CSS_VARS });
+};
+const setClass = (props, options = UPDATE_OPTIONS) => {
+};
+export {
+  DYNAMIC_JSON,
+  applyCSS,
+  init,
+  reinit,
+  setClass,
+  updateVars
+};

package/dist/esm/src/options.js

@@ -0,0 +1,37 @@
+import { defaultDefine } from "./define.js";
+import { version } from "../package.json";
+const DESIGN_SYSTEM_OPTIONS = {
+  useReset: true,
+  useVariable: true,
+  useIconSprite: true,
+  useSvgSprite: true,
+  useDocumentTheme: true,
+  useDefaultIcons: true,
+  useFontImport: true,
+  useDefaultConfig: true
+};
+const ROUTER_OPTIONS = {
+  initRouter: true,
+  popState: true,
+  injectRouterInLinkComponent: true
+};
+const DEFAULT_CONTEXT = {
+  ...DESIGN_SYSTEM_OPTIONS,
+  router: ROUTER_OPTIONS,
+  version
+};
+const CREATE_OPTIONS = {
+  state: {},
+  pages: {},
+  components: {},
+  router: ROUTER_OPTIONS,
+  define: defaultDefine
+};
+var options_default = CREATE_OPTIONS;
+export {
+  CREATE_OPTIONS,
+  DEFAULT_CONTEXT,
+  DESIGN_SYSTEM_OPTIONS,
+  ROUTER_OPTIONS,
+  options_default as default
+};

package/dist/esm/src/prepare.js

@@ -0,0 +1,273 @@
+import {
+  isObject,
+  deepMerge,
+  deepClone,
+  merge,
+  isDevelopment,
+  matchesComponentNaming
+} from "@domql/utils";
+import { initEmotion } from "@symbo.ls/emotion";
+import * as uikit from "@symbo.ls/uikit";
+import * as utils from "./utilImports.js";
+import * as routerUtils from "@domql/router";
+// @preserve-env
+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;
+  context.window = context.window || window;
+  return context.window;
+};
+function onlyDotsAndNumbers(str) {
+  return /^[0-9.]+$/.test(str) && str !== "";
+}
+const CDN_PROVIDERS = {
+  skypack: {
+    url: "https://cdn.skypack.dev",
+    formatUrl: (pkg, version) => `${CDN_PROVIDERS.skypack.url}/${pkg}${version !== "latest" ? `@${version}` : ""}`
+  },
+  esmsh: {
+    url: "https://esm.sh",
+    formatUrl: (pkg, version) => `${CDN_PROVIDERS.esmsh.url}/${pkg}${version !== "latest" ? `@${version}` : ""}`
+  },
+  unpkg: {
+    url: "https://unpkg.com",
+    formatUrl: (pkg, version) => `${CDN_PROVIDERS.unpkg.url}/${pkg}${version !== "latest" ? `@${version}` : ""}?module`
+  },
+  jsdelivr: {
+    url: "https://cdn.jsdelivr.net/npm",
+    formatUrl: (pkg, version) => `${CDN_PROVIDERS.jsdelivr.url}/${pkg}${version !== "latest" ? `@${version}` : ""}/+esm`
+  },
+  symbols: {
+    url: "https://pkg.symbo.ls",
+    formatUrl: (pkg, version) => {
+      if (pkg.split("/").length > 2 || !onlyDotsAndNumbers(version)) {
+        return `${CDN_PROVIDERS.symbols.url}/${pkg}`;
+      }
+      return `${CDN_PROVIDERS.symbols.url}/${pkg}/${version}.js`;
+    }
+  }
+};
+const PACKAGE_MANAGER_TO_CDN = {
+  "esm.sh": "esmsh",
+  "unpkg": "unpkg",
+  "skypack": "skypack",
+  "jsdelivr": "jsdelivr",
+  "pkg.symbo.ls": "symbols"
+};
+const getCdnProviderFromConfig = (symbolsConfig = {}) => {
+  const { packageManager } = symbolsConfig;
+  return PACKAGE_MANAGER_TO_CDN[packageManager] || null;
+};
+const getCDNUrl = (packageName, version = "latest", provider = "esmsh") => {
+  const cdnConfig = CDN_PROVIDERS[provider] || CDN_PROVIDERS.esmsh;
+  return cdnConfig.formatUrl(packageName, version);
+};
+const UIkitWithPrefix = (prefix = "smbls") => {
+  const newObj = {};
+  for (const key in uikit) {
+    if (Object.prototype.hasOwnProperty.call(uikit, key)) {
+      if (matchesComponentNaming(key)) {
+        newObj[`smbls.${key}`] = uikit[key];
+      } else {
+        newObj[key] = uikit[key];
+      }
+    }
+  }
+  return newObj;
+};
+const prepareComponents = (context) => {
+  return context.components ? { ...UIkitWithPrefix(), ...context.components } : UIkitWithPrefix();
+};
+const prepareUtils = (context) => {
+  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,
+    router: context.utils.router
+  };
+};
+const cachedDeps = {};
+const prepareDependencies = async ({
+  dependencies,
+  dependenciesOnDemand,
+  document: document2,
+  preventCaching = false,
+  cdnProvider,
+  packageManager,
+  symbolsConfig
+}) => {
+  if (!cdnProvider) {
+    cdnProvider = PACKAGE_MANAGER_TO_CDN[packageManager] || getCdnProviderFromConfig(symbolsConfig) || "esmsh";
+  }
+  if (!dependencies) return null;
+  let hasAny = false;
+  for (const _k in dependencies) {
+    hasAny = true;
+    break;
+  }
+  if (!hasAny) return null;
+  for (const dependency in dependencies) {
+    const version = dependencies[dependency];
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
+      continue;
+    }
+    const random = isDevelopment() && preventCaching ? `?${Math.random()}` : "";
+    const url = getCDNUrl(dependency, version, cdnProvider) + random;
+    try {
+      if (cachedDeps[dependency]) return;
+      cachedDeps[dependency] = true;
+      await utils.loadRemoteScript(url, { document: document2, type: "module" });
+    } catch (e) {
+      console.error(`Failed to load ${dependency} from ${cdnProvider}:`, e);
+      if (cdnProvider !== "symbols") {
+        try {
+          const fallbackUrl = getCDNUrl(dependency, version, "symbols") + random;
+          await utils.loadRemoteScript(fallbackUrl, { document: document2 });
+          console.log(
+            `Successfully loaded ${dependency} from fallback (symbols.ls)`
+          );
+        } catch (fallbackError) {
+          console.error(
+            `Failed to load ${dependency} from fallback:`,
+            fallbackError
+          );
+        }
+      }
+    }
+  }
+  return dependencies;
+};
+const prepareRequire = async (packages, ctx) => {
+  const windowOpts = ctx.window || window;
+  const defaultProvider = ctx.cdnProvider || getCdnProviderFromConfig(ctx.symbolsConfig) || "esmsh";
+  const initRequire = async (ctx2) => async (key, provider) => {
+    const windowOpts2 = ctx2.window || window;
+    const pkg = windowOpts2.packages[key];
+    if (typeof pkg === "function") return pkg();
+    return pkg;
+  };
+  const initRequireOnDemand = async (ctx2) => async (key, provider = defaultProvider) => {
+    const { dependenciesOnDemand } = ctx2;
+    const documentOpts = ctx2.document || document;
+    const windowOpts2 = ctx2.window || window;
+    if (!windowOpts2.packages[key]) {
+      const random = isDevelopment() ? `?${Math.random()}` : "";
+      if (dependenciesOnDemand && dependenciesOnDemand[key]) {
+        const version = dependenciesOnDemand[key];
+        const url = getCDNUrl(key, version, provider) + random;
+        try {
+          await ctx2.utils.loadRemoteScript(url, {
+            window: windowOpts2,
+            document: documentOpts
+          });
+        } catch (e) {
+          console.error(`Failed to load ${key} from ${provider}:`, e);
+          if (provider !== "symbols") {
+            const fallbackUrl = getCDNUrl(key, version, "symbols") + random;
+            await ctx2.utils.loadRemoteScript(fallbackUrl, {
+              window: windowOpts2,
+              document: documentOpts
+            });
+          }
+        }
+      } else {
+        const url = getCDNUrl(key, "latest", provider) + random;
+        try {
+          await ctx2.utils.loadRemoteScript(url, {
+            window: windowOpts2,
+            document: documentOpts
+          });
+        } catch (e) {
+          console.error(`Failed to load ${key} from ${provider}:`, e);
+          if (provider !== "symbols") {
+            const fallbackUrl = getCDNUrl(key, "latest", "symbols") + random;
+            await ctx2.utils.loadRemoteScript(fallbackUrl, {
+              window: windowOpts2,
+              document: documentOpts
+            });
+          }
+        }
+        windowOpts2.packages[key] = "loadedOnDeman";
+      }
+    }
+    return await windowOpts2.require(key, provider);
+  };
+  if (windowOpts.packages) {
+    windowOpts.packages = merge(windowOpts.packages, packages);
+  } else {
+    windowOpts.packages = packages;
+  }
+  if (!windowOpts.require) {
+    ctx.utils.require = await initRequire(ctx);
+    windowOpts.require = ctx.utils.require;
+  }
+  if (!windowOpts.requireOnDemand) {
+    ctx.utils.requireOnDemand = await initRequireOnDemand(ctx);
+    windowOpts.requireOnDemand = ctx.utils.requireOnDemand;
+  }
+};
+const prepareDesignSystem = (key, context) => {
+  const [scratcDesignhSystem, emotion, registry] = initEmotion(key, context);
+  return [scratcDesignhSystem, emotion, registry];
+};
+const prepareState = (app, context) => {
+  const state = {};
+  if (context.state) utils.deepMerge(state, context.state);
+  if (app && app.state) deepMerge(state, app.state);
+  state.isRootState = true;
+  return deepClone(state);
+};
+const preparePages = (app, context) => {
+  if (isObject(app.routes) && isObject(context.pages)) {
+    merge(app.routes, context.pages);
+  }
+  const pages = app.routes || context.pages || {};
+  for (const v in pages) {
+    if (v.charCodeAt(0) === 47) continue;
+    const index = v === "index" ? "" : v;
+    pages["/" + index] = pages[v];
+    delete pages[v];
+  }
+  return pages;
+};
+const prepareSharedLibs = (context) => {
+  const sharedLibraries = context.sharedLibraries;
+  for (let i = 0; i < sharedLibraries.length; i++) {
+    const sharedLib = sharedLibraries[i];
+    if (context.type === "template") {
+      overwriteShallow(context.designSystem, sharedLib.designSystem);
+      deepMerge(context, sharedLib, ["designSystem"], 1);
+    } else {
+      deepMerge(context, sharedLib, [], 1);
+    }
+  }
+};
+export {
+  PACKAGE_MANAGER_TO_CDN,
+  getCDNUrl,
+  getCdnProviderFromConfig,
+  prepareComponents,
+  prepareDependencies,
+  prepareDesignSystem,
+  prepareMethods,
+  preparePages,
+  prepareRequire,
+  prepareSharedLibs,
+  prepareState,
+  prepareUtils,
+  prepareWindow
+};

package/dist/esm/src/router.js

@@ -0,0 +1,64 @@
+import { window, deepMerge, merge, isUndefined } from "@domql/utils";
+import { router as defaultRouter } from "@domql/router";
+import { Link } from "smbls";
+const DEFAULT_ROUTING_OPTIONS = {
+  initRouter: true,
+  injectRouterInLinkComponent: true,
+  popState: true
+};
+const initRouter = (element, context) => {
+  if (context.router === false) return;
+  else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS;
+  else context.router = merge(context.router || {}, DEFAULT_ROUTING_OPTIONS);
+  const routerOptions = context.router;
+  const onRouterRenderDefault = async (el, s) => {
+    const { pathname, search, hash } = window.location;
+    const url = pathname + search + hash;
+    if (el.routes) await defaultRouter(url, el, {}, { initialRender: true });
+  };
+  const hasRenderRouter = element.on && !isUndefined(element.on.renderRouter) || !isUndefined(element.onRenderRouter);
+  if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
+    if (element.on) {
+      element.on.renderRouter = onRouterRenderDefault;
+    } else {
+      element.on = {
+        renderRouter: onRouterRenderDefault
+      };
+    }
+  }
+  injectRouterInLinkComponent(context, routerOptions);
+  return routerOptions;
+};
+let popStateFired;
+const onpopstateRouter = (element, context) => {
+  if (popStateFired) return;
+  popStateFired = true;
+  const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
+  if (!routerOptions.popState) return;
+  const router = context.utils && context.utils.router ? context.utils.router : defaultRouter;
+  window.onpopstate = async (e) => {
+    const { pathname, search, hash } = window.location;
+    const url = pathname + search + hash;
+    await element.call(
+      "router",
+      url,
+      element,
+      {},
+      { pushState: false, scrollToTop: false, level: 0, event: e }
+    );
+  };
+};
+const injectRouterInLinkComponent = (context, routerOptions) => {
+  const { components } = context;
+  if (routerOptions && routerOptions.injectRouterInLinkComponent) {
+    return deepMerge(
+      components["Link"] || components["smbls.Link"],
+      components["RouterLink"] || components["smbls.RouterLink"]
+    );
+  }
+};
+export {
+  initRouter,
+  injectRouterInLinkComponent,
+  onpopstateRouter
+};

package/dist/esm/src/syncExtend.js

@@ -0,0 +1,50 @@
+import { isObjectLike, isUndefined, isDevelopment, isArray } from "@domql/utils";
+import { SyncComponent, Inspect, Notifications } from "@symbo.ls/sync";
+const initializeExtend = (app, ctx) => {
+  return isObjectLike(app.extends) ? app.extends : [];
+};
+const initializeSync = (app, ctx) => {
+  const { editor } = ctx;
+  if (!editor) return;
+  const liveSync = isUndefined(editor.liveSync) ? isDevelopment() : editor.liveSync;
+  if (liveSync) {
+    if (isArray(app.extends)) app.extends.push(SyncComponent);
+    else if (app.extends) {
+      app.extends = [app.extends, SyncComponent];
+    } else {
+      app.extends = [SyncComponent];
+    }
+  }
+};
+const initializeInspect = (app, ctx) => {
+  const { editor } = ctx;
+  if (!editor) return;
+  const inspect = isUndefined(editor.inspect) ? isDevelopment() : editor.inspect;
+  if (inspect) {
+    if (isArray(app.extends)) app.extends.push(Inspect);
+    else if (app.extends) {
+      app.extends = [app.extends, Inspect];
+    } else {
+      app.extends = [Inspect];
+    }
+  }
+};
+const initializeNotifications = (app, ctx) => {
+  const { editor } = ctx;
+  if (!editor) return;
+  const verbose = isUndefined(editor.verbose) ? isDevelopment() || ctx.verbose : editor.verbose;
+  if (verbose) {
+    if (isArray(app.extends)) app.extends.push(Notifications);
+    else if (app.extends) {
+      app.extends = [app.extends, Notifications];
+    } else {
+      app.extends = [Notifications];
+    }
+  }
+};
+export {
+  initializeExtend,
+  initializeInspect,
+  initializeNotifications,
+  initializeSync
+};

package/dist/esm/src/utilImports.js

@@ -0,0 +1,14 @@
+import { scratchUtils, scratchSystem, set } from "@symbo.ls/scratch";
+export * from "@domql/utils";
+export * from "@symbo.ls/smbls-utils";
+import { init, reinit, applyCSS } from "./init.js";
+export * from "@domql/report";
+export * from "@domql/router";
+export {
+  applyCSS,
+  init,
+  reinit,
+  scratchSystem,
+  scratchUtils,
+  set
+};