smbls 3.14.2 → 3.14.6

package/src/index.js

@@ -1,245 +0,0 @@
-'use strict'
-
-import { deepMerge, isObject, isUndefined } from '@symbo.ls/utils'
-
-import * as utils from './utilImports.js'
-
-import { onpopstateRouter } from './router.js'
-import { fetchAsync, fetchSync } from './fetchOnCreate.js'
-import { destroy } from './destroy.js'
-
-import DEFAULT_CREATE_OPTIONS from './options.js'
-import { createDomqlElement } from './createDomql.js'
-
-const mergeWithLocalFile = (options, optionsExternalFile) =>
-  deepMerge(
-    options,
-    isObject(optionsExternalFile) ? optionsExternalFile : {}
-  )
-
-// Sync theme resolver. Order of precedence:
-//   1. `?globalTheme=<name>` URL parameter  — used by embedded iframes to
-//      push a theme into the child app.
-//   2. `options.themeStorageKey` via `localStorage` — previously remembered
-//      user choice. Supply `themeStorageKey: false` to opt out entirely.
-//   3. `options.globalTheme` — the value configured in the project.
-// The resolved value lands on `options.globalTheme` (for downstream
-// `scratch.set`) and on `options.themeRoot.setAttribute('data-theme', …)`
-// for the first paint. `'auto'` follows `prefers-color-scheme` and writes
-// either 'dark' or 'light' onto the attribute so per-element
-// `[data-theme="…"] &` rules can resolve without any @media wrapper.
-// Scratch.set then takes over and registers a live `prefers-color-scheme`
-// listener so later OS changes flip the attribute automatically.
-const resolveAndApplyTheme = (options) => {
-  if (typeof document === 'undefined') return
-  const scopeRoot = options.themeRoot ||
-    (options.document && options.document.documentElement) ||
-    document.documentElement
-  if (!scopeRoot || typeof scopeRoot.setAttribute !== 'function') return
-
-  let theme = options.globalTheme || 'auto'
-
-  // URL override — preview/editor-style iframe integration. Forces a theme.
-  try {
-    if (typeof window !== 'undefined' && window.location) {
-      const urlTheme = new URLSearchParams(window.location.search).get('globalTheme')
-      if (urlTheme) theme = urlTheme
-    }
-  } catch (e) {} // jsdom / sandboxed windows can throw
-
-  // Persisted user choice — only consulted when no explicit config/URL
-  // value is forcing a different one.
-  const storageKey = options.themeStorageKey
-  if (theme === 'auto' && storageKey && typeof localStorage !== 'undefined') {
-    try {
-      const stored = localStorage.getItem(storageKey)
-      if (stored) theme = stored
-    } catch (e) {}
-  }
-
-  // Early-paint attribute: we always need a concrete `data-theme` so the
-  // single CSS selector pattern `[data-theme="<scheme>"]` resolves. For
-  // `auto`, resolve once from `prefers-color-scheme` — scratch.set will
-  // install a listener later so subsequent OS changes update the attr
-  // live.
-  const resolvedForAttr = theme === 'auto'
-    ? (() => {
-        try {
-          return (typeof window !== 'undefined' && window.matchMedia &&
-            window.matchMedia('(prefers-color-scheme: dark)').matches)
-            ? 'dark' : 'light'
-        } catch (e) { return 'light' }
-      })()
-    : theme
-
-  scopeRoot.setAttribute('data-theme', resolvedForAttr)
-
-  // Keep `options.globalTheme` semantic: only overwrite if we resolved to
-  // a forced value (URL / localStorage). Leaving it as `'auto'` tells
-  // scratch.set to register the `prefers-color-scheme` listener.
-  options.globalTheme = theme
-  options.themeRoot = scopeRoot
-}
-
-// Read `<meta name="symbols-runtime" content="...">` from the served
-// document. This is how the runner signals its mode to the framework
-// without a window global — it injects the meta tag into the served
-// HTML, the framework reads it once at create() time and stamps the
-// matching `editor.runtime` so syncPlugin (and anyone else who cares)
-// can detect runner mode via context.
-const readRuntimeMeta = () => {
-  if (typeof document === 'undefined') return null
-  try {
-    const m = document.querySelector('meta[name="symbols-runtime"]')
-    const v = m && m.getAttribute('content')
-    return (typeof v === 'string' && v) ? v : null
-  } catch (_) {
-    return null
-  }
-}
-
-const stampRuntimeFromMeta = (options) => {
-  const runtime = readRuntimeMeta()
-  if (!runtime) return
-  if (!options.editor) options.editor = {}
-  // Don't clobber an explicit project setting — projects can override
-  // by setting `editor.runtime` themselves before calling create.
-  if (!options.editor.runtime) options.editor.runtime = runtime
-  // Default livesync on for runner mode unless the project disabled it.
-  if (runtime === 'runner' && typeof options.editor.livesync === 'undefined') {
-    options.editor.livesync = true
-  }
-}
-
-export const create = (
-  App,
-  options = DEFAULT_CREATE_OPTIONS,
-  optionsExternalFile
-) => {
-  const redefinedOptions = {
-    ...DEFAULT_CREATE_OPTIONS,
-    ...mergeWithLocalFile(options, optionsExternalFile)
-  }
-
-  // Pick up runner-mode (or any future runtime tag) from the served HTML.
-  // Has to happen before `createDomqlElement` so syncPlugin's beforeCreate
-  // sees the stamped editor.runtime.
-  stampRuntimeFromMeta(redefinedOptions)
-
-  // Resolve the active theme synchronously, before the async init chain,
-  // and write `data-theme` to the scope's root element. This gives the
-  // first paint the correct theme — no project-side setAttribute hack,
-  // no flash of the wrong OS theme. The resolved value is written back
-  // into options so the downstream scratch.set() uses the same value
-  // (instead of re-resolving from its own defaults).
-  resolveAndApplyTheme(redefinedOptions)
-
-  const domqlApp = createDomqlElement(App, redefinedOptions).then((app) => {
-    onpopstateRouter(app, redefinedOptions)
-
-    // Ergonomic shortcut so callers can `app.destroy()` instead of importing.
-    app.destroy = () => destroy(app)
-
-    if (app.onCreate) app.onCreate(app, app.state, app.context, redefinedOptions)
-
-    // Hydration gate: flip the analyze plugin from dormant → active.
-    // Browser/network listeners attach here; pre-ready error buffer is drained.
-    if (app.context?.analyze?.activate) {
-      try { app.context.analyze.activate(app.context) } catch (err) {
-        console.error('[analyze] activate error:', err)
-      }
-    }
-
-    return app
-  }).catch((err) => {
-    console.error('[smbls] create error:', err)
-    throw err
-  })
-
-  return domqlApp
-}
-
-export 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
-}
-
-export const createSync = async (
-  App,
-  options = DEFAULT_CREATE_OPTIONS,
-  optionsExternalFile
-) => {
-  const redefinedOptions = {
-    ...DEFAULT_CREATE_OPTIONS,
-    ...mergeWithLocalFile(options, optionsExternalFile)
-  }
-
-  // Pick up runner-mode from the served HTML's meta tag — same path
-  // `create` uses. Required because projects often boot via createSync
-  // (e.g. starter-kit, docs/developers) and the runner needs to detect
-  // its mode regardless of which entry point the project chose.
-  stampRuntimeFromMeta(redefinedOptions)
-
-  // const SYMBOLS_KEY = process.env.SYMBOLS_KEY
-  const key = options.key
-  await fetchSync(key, redefinedOptions)
-
-  const domqlApp = await createDomqlElement(App, redefinedOptions)
-  onpopstateRouter(domqlApp, redefinedOptions)
-  domqlApp.destroy = () => destroy(domqlApp)
-  if (redefinedOptions.onCreate)
-    await redefinedOptions.onCreate(
-      domqlApp,
-      domqlApp.state,
-      domqlApp.context,
-      redefinedOptions
-    )
-
-  return domqlApp
-}
-
-export const createSkeleton = (
-  App = {},
-  options = DEFAULT_CREATE_OPTIONS,
-  optionsExternalFile
-) => {
-  return create(
-    {
-      deps: { isUndefined },
-      ...App
-    },
-    deepMerge({ domqlOptions: { onlyResolveExtends: true } }, options),
-    optionsExternalFile
-  )
-}
-
-export { destroy } from './destroy.js'
-
-export default create
-
-export * from './init.js'
-export { DEFAULT_CONTEXT, DESIGN_SYSTEM_OPTIONS, ROUTER_OPTIONS } from './options.js'
-export { defaultDefine, createDefine } from './define.js'
-
-// Polyglot i18n plugin
-export { polyglotPlugin, translate, setLang, getActiveLang, getLanguages, loadTranslations, upsertTranslation, initPolyglot, getLocalStateLang } from '@symbo.ls/polyglot'
-export { polyglotFunctions } from '@symbo.ls/polyglot/functions'
-
-// Theme switching — exposed on the IIFE bundle so project code can call
-// `Smbls.changeGlobalTheme('dark')` from within serialized handlers
-// (mermaid SSR runtime). Without an explicit re-export here, the bundler
-// tree-shakes the symbol out of dist/iife/index.js because nothing in the
-// smbls/src tree calls it directly.
-export { changeGlobalTheme } from '@symbo.ls/scratch'

package/src/init.js

@@ -1,172 +0,0 @@
-'use strict'
-
-import {
-  set,
-  getActiveConfig,
-  getFontFaceString,
-  appendSVGSprite,
-  appendSvgIconsSprite,
-  changeGlobalTheme as _changeGlobalTheme
-} from '@symbo.ls/scratch'
-
-import { isObject, deepMerge, deepClone } from '@symbo.ls/utils'
-
-import { css, injectGlobal } from '@symbo.ls/css'
-
-const CONFIG = getActiveConfig()
-
-const mergeWithLocalFile = (config = CONFIG, options) => {
-  const rcfile = isObject(options.localFile)
-    ? options.localFile
-    : {}
-  const clonedFile = deepClone(rcfile.designSystem || {})
-  return deepMerge(config, clonedFile)
-}
-
-const SET_OPTIONS = {
-  useVariable: true,
-  useReset: true,
-  useFontImport: true,
-  useIconSprite: true,
-  useDocumentTheme: true,
-  useSvgSprite: true
-}
-
-export const init = (config, options = SET_OPTIONS) => {
-  const resultConfig = mergeWithLocalFile(config || {}, options)
-  const scope = options.scopeSelector || ':root'
-  const themeScope = scope === ':root' ? ':root:not([data-theme])' : `${scope}:not([data-theme])`
-
-  // Allow URL param to override globalTheme (used by preview iframe)
-  let globalTheme = options.globalTheme
-  if (typeof window !== 'undefined' && window.location) {
-    const urlTheme = new URLSearchParams(window.location.search).get('globalTheme')
-    if (urlTheme) globalTheme = urlTheme
-  }
-
-  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,
-      themeRoot: options.themeRoot,
-      files: options.files,
-      assets: options.assets,
-      ...resultConfig
-    },
-    { newConfig: options.newConfig, config: options.config }
-  )
-  // Remember the scope selector on the config so downstream consumers
-  // (e.g. set.js live updates) can target the right CSS rule.
-  if (conf) conf.scopeSelector = scope
-
-  const FontFace = getFontFaceString(conf.font, conf.files)
-
-  const useReset = conf.useReset
-  const useVariable = conf.useVariable
-  const useFontImport = conf.useFontImport
-  const useSvgSprite = conf.useSvgSprite
-  const hasSvgs = config.svg
-  const useIconSprite = conf.useIconSprite
-  const hasIcons = config.icons
-
-  if (useFontImport) injectGlobal(FontFace)
-  if (useVariable) {
-    injectGlobal({ [scope]: conf.CSS_VARS })
-    // Inject theme-switching CSS vars (media queries + data-theme selectors)
-    if (conf.CSS_MEDIA_VARS) {
-      const themeStyles = {}
-      for (const key in conf.CSS_MEDIA_VARS) {
-        if (key.startsWith('@media')) {
-          // Media query — only apply when no data-theme forces a theme
-          themeStyles[key] = { [themeScope]: conf.CSS_MEDIA_VARS[key] }
-        } else {
-          // Selector ([data-theme="..."]) — apply directly
-          themeStyles[key] = conf.CSS_MEDIA_VARS[key]
-        }
-      }
-      injectGlobal(themeStyles)
-    }
-  }
-  if (useReset) injectGlobal(conf.reset)
-
-  // Register all ANIMATION entries as global @keyframes
-  const animations = conf.animation
-  if (animations) {
-    const keyframesCSS = {}
-    for (const name in animations) {
-      keyframesCSS[`@keyframes ${name}`] = animations[name]
-    }
-    injectGlobal(keyframesCSS)
-  }
-
-  if (hasSvgs || useSvgSprite)
-    appendSVGSprite(conf.svg, { document: options.document })
-
-  if (hasIcons || useIconSprite)
-    appendSvgIconsSprite(conf.icons, { document: options.document })
-
-  return conf
-}
-
-const UPDATE_OPTIONS = {}
-
-export const reinit = (config, options = UPDATE_OPTIONS) => {
-  const resultConfig = mergeWithLocalFile(config || {}, options)
-  const scope = options.scopeSelector || ':root'
-  const themeScope = scope === ':root' ? ':root:not([data-theme])' : `${scope}:not([data-theme])`
-  const conf = set({
-    verbose: false,
-    ...resultConfig
-  })
-  if (!options.preventInject) {
-    injectGlobal({ [scope]: conf.CSS_VARS })
-    if (conf.CSS_MEDIA_VARS) {
-      const themeStyles = {}
-      for (const key in conf.CSS_MEDIA_VARS) {
-        if (key.startsWith('@media')) {
-          themeStyles[key] = { [themeScope]: conf.CSS_MEDIA_VARS[key] }
-        } else {
-          themeStyles[key] = conf.CSS_MEDIA_VARS[key]
-        }
-      }
-      injectGlobal(themeStyles)
-    }
-    injectGlobal(conf.reset)
-  }
-  return conf
-}
-
-export const applyCSS = (styles, options = UPDATE_OPTIONS) => {
-  injectGlobal(styles)
-}
-
-export const updateVars = (config, options = UPDATE_OPTIONS) => {
-  const scope = options.scopeSelector || ':root'
-  const themeScope = scope === ':root' ? ':root:not([data-theme])' : `${scope}:not([data-theme])`
-  injectGlobal({ [scope]: config.CSS_VARS })
-  if (config.CSS_MEDIA_VARS) {
-    const themeStyles = {}
-    for (const key in config.CSS_MEDIA_VARS) {
-      if (key.startsWith('@media')) {
-        themeStyles[key] = { [themeScope]: config.CSS_MEDIA_VARS[key] }
-      } else {
-        themeStyles[key] = config.CSS_MEDIA_VARS[key]
-      }
-    }
-    injectGlobal(themeStyles)
-  }
-}
-
-export const changeGlobalTheme = (newTheme, targetConfig) => {
-  return _changeGlobalTheme(newTheme, targetConfig)
-}
-
-export const setClass = (props, options = UPDATE_OPTIONS) => {} // setClassname(props, css)
-

package/src/options.js

@@ -1,35 +0,0 @@
-'use strict'
-
-import { defaultDefine } from './define.js'
-
-export const DESIGN_SYSTEM_OPTIONS = {
-  useReset: true,
-  useVariable: true,
-  useIconSprite: true,
-  useSvgSprite: true,
-  useDocumentTheme: true,
-  useDefaultIcons: true,
-  useFontImport: true,
-  useDefaultConfig: true
-}
-
-export const ROUTER_OPTIONS = {
-  initRouter: true,
-  popState: true,
-  injectRouterInLinkComponent: true
-}
-
-export const DEFAULT_CONTEXT = {
-  ...DESIGN_SYSTEM_OPTIONS,
-  router: ROUTER_OPTIONS
-}
-
-export const CREATE_OPTIONS = {
-  state: {},
-  pages: {},
-  components: {},
-  router: ROUTER_OPTIONS,
-  define: defaultDefine
-}
-
-export default CREATE_OPTIONS