@lightningjs/blits 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## v1.2.0
+
+_5 aug 2024_
+
+- Added plugin system for Blits
+- Added Language plugin, modeled after L2-SDK Language plugin
+- Removed unused built-in Image component
+- Marked `this.trigger()`-method as deprecated in definition file
+- Removed double assignment of `this.node` during element creation
+
 ## v1.1.0
 
 _25 july 2024_

package/docs/_sidebar.md

@@ -24,3 +24,4 @@
   - [For loop](/built-in/for-loop.md)
 - Plugins
   - [Text-to-Speech / Announcer](/plugins/text-to-speech-announcer.md)
+  - [Language](/plugins/language.md)

package/docs/plugins/language.md

@@ -0,0 +1,174 @@
+# Blits - Lightning 3 App Development Framework
+
+## Language plugin
+
+Blits comes with a built-in Language plugin, that can be used to add internationalization (i18n) to your App.
+
+The Blits Language plugin is a simple and lightweight implementation, closely modeled after the tried and tested Language plugin in the Lightning-SDK (for Lightning 2). It is designed to provide a flexible and easy way of translating texts to multiple languages, in a performant way.
+
+### Registering the plugin
+
+While the Language plugin is provided in the core Blits package, it's an _optional_ plugin that needs to be registered before you're able to use it. As such the Language plugin is _tree-shakable_, i.e. for Apps that don't have a need for translation functionality, the Language plugin will not be part of the final App bundle.
+
+The Language plugin should be imported from Blits and registered in the App's `index.js`, as demonstrated in the example below.
+
+Make sure to place the `Blits.Plugin()` method _before_ calling the `Blits.Launch()` method
+
+```js
+// index.js
+
+import Blits from '@lightningjs/blits'
+// import the language plugin
+import { language } from '@lightningjs/blits/plugins'
+
+import App from './App.js'
+
+// Use the Blits Language plugin and
+// optionally pass in a settings object
+Blits.Plugin(language, {
+  file: '/assets/translations.json', // file with translations
+  language: 'EN-us', // default language
+})
+
+
+Blits.Launch(App, 'app', {
+  // launch settings
+})
+```
+
+The Language plugin accepts an optional configuration object with 2 keys:
+
+- `file` - the JSON file with translations to be loaded at initialization
+- `language` - the default language to use
+
+After registration of the Language plugin, it will be availabe in each Blits Component as `this.$language`.
+
+### Translations file
+
+The most common way of defining a set of translations, is to use a dedicated JSON file, modeled after
+the following format:
+
+```json
+{
+    "nl-NL": {
+      "hello": "Hallo, alles goed?",
+      "bye": "Doei!",
+      "replacement": "Mijn naam is {first} {last}, ik ben {age} jaar"
+    },
+    "en-US": {
+      "hello": "Hello, how are you doing?",
+      "bye": "Goodbye!",
+      "replacement": "My name is {first} {last}, I'm {age} years old"
+    },
+    "fr-FR": {
+      "hello": "Bonjour, ça va?",
+      "bye": "Au revoir!",
+      "replacement": "Je m'appelle {first} {last}, j'ai {age} ans"
+    },
+    "de-DE": {
+      "hello": "Gutentag, wie geht's?",
+      "bye": "Tschüss!",
+      "replacement": "Mein Name ist {first} {last}, ich bin {age} Jahre alt"
+    }
+  }
+```
+
+Each top level key represents a language, which contains an object with translation key-value pairs. The language key
+doesn't require to be in a specific format, but it's recommended to use ISO-codes.
+
+When the JSON file is specified in the Plugin registration method, the language file is loaded automatically upon instantiation.
+
+In case you want to load the file with translations manually, you can use the `this.$language.load()`-method anywhere in a Component and pass in the path to the JSON file as the first argument.
+
+### Defining translations manualy
+
+As an alternative to a JSON file with translations, you can also define translations directly via an object, using the `translations()`-method.
+
+The `this.$language.translations()`-methods accepts a translations object as it's first argument, following the same format as the JSON file. The method is typically used in an `init` or `ready` hook
+
+```js
+Blits.Component('MyComponent', {
+  // ...
+  hooks: {
+    init() {
+      this.$language.translations({
+        english: {
+          hello: "Hello",
+          world: "World"
+        },
+        italian: {
+          hello: "Ciao",
+          world: "Mondo"
+        }
+      })
+    }
+  },
+})
+```
+
+### Setting the language
+
+In order to set (or change) the current language, the `this.$language.set()`-method can be used, passing in the new language code (matching one of the languages defined in the translations).
+
+```js
+Blits.Component('MyComponent', {
+  // ...
+  input: {
+    enter() {
+      this.$language.set('pt-BR')
+    }
+  },
+})
+```
+
+### Getting the current language
+
+The current language can be retrieved via the `this.$language.get()` method. It will return the currently set language code.
+
+### Translating
+
+The most important functionality in the Language plugin is translating. The Language plugin exposes a `translate()` method that takes as string to translate as it's first argument. It will return the translated value in the currently set language. If either the language or the string to translate can't be found, it will return the inputed string.
+
+The translate method can be used both inside the javascript business logic, but also directly in the template.
+
+```js
+Blits.Component('MyComponent', {
+  template: `
+    <Element>
+      <Text :content="$$language.translate('hello')" />
+      <Text y="100" :content="$$language.get()" />
+    </Element>
+  `,
+  hooks: {
+    ready() {
+      console.log(this.$language.translate('world'))
+    }
+  },
+})
+```
+
+Note that in the template definition 2 consecutive dollars signs are used (`$$language`). The first `$`-sign is used
+to refer to the Component scope, as with any other state variable or computed property refereced in the template.
+
+The second `$`-sign is needed, since the Language plugin itself is prefixed with a dollar sign on the Component scope as well (i.e `this.$language`).
+
+
+#### Dynamic replacements
+
+The `tranlate()`-method also supports dynamic replacements. This allows you to specify variables inside your translation string, and replace them with dynamic values passed into the `translate()`-method.
+
+Replacements are marked in the translation value using _handlebars_, like so:
+
+```js
+{
+  replacements = "My name is {first} {last}, I'm {age} years old"
+}
+```
+
+Now when you call the `translate()`-method and pass in an object with dynamic values, those will be replaced
+in the final string accordingly:
+
+```js
+this.$language.translate('replacements', {name: 'John', last: 'Doe', age: 18})
+// result: My name is John Doe, I'm 18 years old
+```

package/docs/sidebar.json

@@ -106,6 +106,10 @@
       {
         "text": "Text-to-Speech / Announcer",
         "link": "/plugins/text-to-speech-announcer"
+      },
+      {
+        "text": "Language",
+        "link": "/plugins/language"
       }
     ]
   }

package/index.d.ts

@@ -18,6 +18,7 @@
 import Component from './src/component.js'
 import Application from './src/application.js'
 import Launch from './src/launch.js'
+import Plugin from './src/plugin.js'
 
 /**
  * Blits - The Lightning 3 App Development Framework
@@ -26,6 +27,7 @@ declare module Blits {
   export { Component }
   export { Application }
   export { Launch }
+  export { Plugin }
 }
 
 export default Blits

package/index.js

@@ -18,9 +18,11 @@
 import Component from './src/component.js'
 import Application from './src/application.js'
 import Launch from './src/launch.js'
+import Plugin from './src/plugin.js'
 
 export default {
   Component,
   Application,
   Launch,
+  Plugin,
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
     ".": "./index.js",
     "./vite": "./vite/index.js",
     "./transitions": "./src/router/transitions/index.js",
-    "./precompiler": "./src/lib/precompiler/precompiler.js"
+    "./precompiler": "./src/lib/precompiler/precompiler.js",
+    "./plugins": "./src/plugins/index.js"
   },
   "scripts": {
     "test": "c8 npm run test:run",

package/src/component/base/index.js

@@ -22,8 +22,11 @@ import log from './log.js'
 import router from './router.js'
 import announcer from './announcer.js'
 import utils from './utils.js'
+import symbols from '../../lib/symbols.js'
 
 export default Object.defineProperties(
-  {},
+  {
+    [symbols['pluginsRegistered']]: false,
+  },
   { ...methods, ...scheduling, ...events, ...log, ...router, ...announcer, ...utils }
 )

package/src/component/base/log.js

@@ -21,7 +21,7 @@ export default {
   $log: {
     value: log('App'),
     writable: false,
-    enumerable: false,
+    enumerable: true,
     configurable: false,
   },
 }

package/src/component.d.ts

@@ -328,6 +328,12 @@ declare namespace Component {
      * Triggers a forced update on state variables.
      */
     $trigger: (key: string) => void
+    /**
+     * @deprecated
+     *
+     * Triggers a forced update on state variables.
+     * Deprecated: use `this.$trigger()` instead
+     */
     trigger: (key: string) => void
 
     /**

package/src/component.js

@@ -34,6 +34,8 @@ import Settings from './settings.js'
 import setupComponent from './component/setup/index.js'
 import components from './components/index.js'
 
+import { plugins } from './plugin.js'
+
 // object to store global components
 let globalComponents
 
@@ -202,7 +204,30 @@ const Component = (name = required('name'), config = required('config')) => {
   }
 
   const factory = (options = {}, parentEl, parentComponent, rootComponent) => {
-    // setup the component once, using Base as the prototype
+    // Register user defined plugins once on the Base object
+    if (Base[symbols['pluginsRegistered']] === false) {
+      Object.keys(plugins).forEach((pluginName) => {
+        const prefixedPluginName = `$${pluginName}`
+        if (prefixedPluginName in Base) {
+          Log.warn(
+            `"${pluginName}" (this.${prefixedPluginName}) already exists as a property or plugin on the Base Component. You may be overwriting built-in functionality. Proceed with care!`
+          )
+        }
+
+        const plugin = plugins[pluginName]
+
+        Object.defineProperty(Base, prefixedPluginName, {
+          // instantiate the plugin, passing in provided options
+          value: plugin.plugin(plugin.options),
+          writable: false,
+          enumerable: true,
+          configurable: false,
+        })
+      })
+      Base[symbols['pluginsRegistered']] = true
+    }
+
+    // setup the component once per component type, using Base as the prototype
     if (!base) {
       Log.debug(`Setting up ${name} component`)
       base = setupComponent(Object.create(Base), config)

package/src/components/index.js

@@ -15,7 +15,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Image from './Image.js'
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
 import Sprite from './Sprite.js'
@@ -23,7 +22,6 @@ import FPScounter from './FPScounter.js'
 import Layout from './Layout.js'
 
 export default () => ({
-  Image: Image(),
   Circle: Circle(),
   RouterView: RouterView(),
   Sprite: Sprite(),

package/src/components/index.orig.js

@@ -15,7 +15,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Image from './Image.js'
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
 import Sprite from './Sprite.js'
@@ -23,7 +22,6 @@ import FPScounter from './FPScounter.js'
 import Layout from './Layout.js'
 
 export default () => ({
-  Image: Image(),
   Circle: Circle(),
   RouterView: RouterView(),
   Sprite: Sprite(),

package/src/engines/L3/element.js

@@ -272,7 +272,7 @@ const Element = {
 
     this.node = props.__textnode
       ? renderer.createTextNode({ ...textDefaults, ...this.props.props })
-      : (this.node = renderer.createNode(this.props.props))
+      : renderer.createNode(this.props.props)
 
     if (props['@loaded']) {
       this.node.on('loaded', (el, { type, dimensions }) => {

package/src/helpers/fetchJson.js

@@ -0,0 +1,34 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2020 Metrological
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default (file) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        // file protocol returns 0
+        // http(s) protocol returns 200
+        if (xhr.status === 0 || xhr.status === 200) resolve(JSON.parse(xhr.responseText))
+        else reject(xhr.statusText)
+      }
+    }
+    xhr.open('GET', file)
+    xhr.send(null)
+  })
+}

package/src/lib/codegenerator/generator.js

@@ -458,7 +458,7 @@ const generateCode = function (templateObject, parent = false, options = {}) {
 const interpolate = (val, component = 'component.') => {
   if (val === undefined) return val
   const replaceString = /('.*?')+/gi
-  const replaceDollar = /\$/gi
+  const replaceDollar = /\$(\$(?=\$)|\$?)/g
   const matches = val.matchAll(replaceString)
   const restore = []
 
@@ -471,10 +471,19 @@ const interpolate = (val, component = 'component.') => {
     i++
   }
 
-  // replace remaining dollar signs
-  val = val.replace(replaceDollar, component || '')
+  // replace dollar signs using the regex and function
+  val = val.replace(replaceDollar, (match, group1) => {
+    // single dollar sign
+    if (group1 === '') {
+      return component
+    }
+    // consecutive dollar sign, replace only the first $
+    else if (group1 === '$') {
+      return component + '$'
+    }
+  })
 
-  // restore string replacemenet
+  // restore string replacement
   restore.forEach((el, idx) => {
     val = val.replace(`[@@REPLACEMENT${idx}@@]`, el)
   })

package/src/lib/codegenerator/generator.test.js

@@ -2290,3 +2290,55 @@ test('Generate code for a template with a simple for-loop on an Element with an
 
   assert.end()
 })
+
+test('Generate code for a template with double $$ (i.e. referencing a Blits plugin)', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Text',
+        ':content': "$$language.translate('hello')",
+      },
+    ],
+  }
+
+  const expectedRender = `
+  function anonymous(parent, component, context, components, effect, getRaw) {
+      const elms = []
+      let componentType
+      const rootComponent = component
+      const elementConfig0 = {}
+
+      elms[0] = this.element({ parent: parent || 'root' }, component)
+      elementConfig0['content'] = component.$language.translate('hello')
+      elementConfig0['__textnode'] = true
+      elms[0].populate(elementConfig0)
+
+      return elms
+  }
+  `
+
+  const expectedEffect1 = `
+  function anonymous(component, elms, context, components, rootComponent, effect) {
+    elms[0].set('content', component.$language.translate('hello'))
+  }
+  `
+
+  const actual = generator.call(scope, templateObject)
+
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 1,
+    'Generator should return an effects array with 1 item'
+  )
+  assert.equal(
+    normalize(actual.effects[0].toString()),
+    normalize(expectedEffect1),
+    'Generator should return first render function with the correct code'
+  )
+
+  assert.end()
+})

package/src/lib/symbols.js

@@ -14,6 +14,7 @@ export default {
   level: Symbol('level'),
   methodKeys: Symbol('methodKeys'),
   originalState: Symbol('originalState'),
+  pluginsRegistered: Symbol('pluginsRegistered'),
   propKeys: Symbol('propKeys'),
   raw: Symbol('raw'),
   ready: Symbol('ready'),

package/src/plugin.d.ts

@@ -0,0 +1,71 @@
+
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+declare namespace Plugin {
+
+  interface Plugin {
+    /**
+     * Name of the plugin. The plugin will be accessible on each Component's
+     * `this` scope under this name, prefixed with a `$` (i.e. myplugin => `this.$myplugin`)
+     */
+    name: string,
+    /**
+     * Singleton function that will be used to instantiate the plugin.
+     * Should do all necessary setup and ideally return an object with
+     * properties or methods that can be used in the App
+     */
+    plugin: () => any
+  }
+
+}
+
+
+/**
+ * Blits.Plugin()
+ *
+ * Method to register a plugin
+ */
+declare function Plugin(
+  /**
+   * Plugin object or singleton function that will be used to instantiate the
+   * plugin. Should do all necessary setup and ideally return an object with
+   * properties or methods that can be used in the App
+   */
+  plugin: Plugin.Plugin | (() => any),
+  /**
+   * Name of the plugin or options object, to be passed into the plugin instantiation.
+   *
+   * When passing a string, the value will be used as **name** of the plugin. The plugin
+   * will be accessible on each Component's `this` scope under this name, prefixed with a `$`
+   * (i.e. myplugin => `this.$myplugin`)
+   *
+   * Passing a name is **required** when `plugin` argument is a singleton function
+   *
+   * When passing an object, the value will be considered to be an `options` object.
+   * The options object will be passed into the plugin instantiation method. Can
+   * be used to set default values
+   */
+  nameOrOptions?: string | object,
+  /**
+   * Object with options to be passed into the plugin instantiation method.
+   * Can be used to set default values
+   */
+  options?: object
+) : void
+
+export default Plugin;

package/src/plugin.js

@@ -0,0 +1,23 @@
+export const plugins = {}
+
+const registerPlugin = (plugin, nameOrOptions = '', options = {}) => {
+  // map name and options depending on the arguments provided
+  let name
+  if (typeof nameOrOptions === 'object') {
+    options = nameOrOptions
+    name = ''
+  } else {
+    name = nameOrOptions
+  }
+
+  if (typeof plugin === 'function') {
+    if (name === '') {
+      throw Error('Error registering plugin: name is required for plugin')
+    }
+    plugins[name] = { plugin, options }
+  } else if (plugin.plugin) {
+    registerPlugin(plugin.plugin, plugin.name, options)
+  }
+}
+
+export default registerPlugin

package/src/{components/Image.orig.js → plugins/index.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Copyright 2024 Comcast Cable Communications Management, LLC
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -15,19 +15,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Component from '../component.js'
-
-export default () =>
-  Component('Image', {
-    template: `
-      <Element :imageSource="$imageSource" />`,
-    props: ['src'],
-    computed: {
-      imageSource() {
-        if (/^(?:https?:)?\/\//i.test(this.src)) {
-          return this.src
-        }
-        return `${window.location.protocol}//${window.location.host}/${this.src}`
-      },
-    },
-  })
+export { default as language } from './language.js'

package/src/plugins/language.js

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import fetchJson from '../helpers/fetchJson'
+import { Log } from '../lib/log'
+import { reactive } from '../lib/reactivity/reactive'
+
+export default {
+  name: 'language',
+  plugin(options = {}) {
+    let translations = {}
+    let dictionary = {}
+
+    const state = reactive({
+      language: '',
+      loaded: 0,
+    })
+
+    const setLanguage = (language) => {
+      // define the dictionary
+      dictionary = translations[language] || {}
+      // set the current language in the reactive state
+      state.language = language
+
+      // warnings
+      if (Object.keys(translations).length === 0) {
+        Log.warn(
+          'No translations loaded. Please load a file with translations or specify a translations object manually'
+        )
+      }
+      if (language in translations === false) {
+        Log.warn(`Language ${language} not available in the loaded translations`)
+      }
+    }
+
+    const loadLanguageFile = (filePath) => {
+      return fetchJson(filePath)
+        .then((result) => {
+          setTranslations(result)
+        })
+        .catch((e) => {
+          Log.error(e)
+        })
+    }
+
+    const setTranslations = (translationsObject) => {
+      translations = translationsObject
+      dictionary = translations[state.language] || {}
+      state.loaded++
+    }
+
+    if ('file' in options) {
+      loadLanguageFile(options.file).then(() => {
+        if ('language' in options) {
+          setLanguage(options.language)
+        }
+      })
+    } else if ('language' in options) {
+      setLanguage(options.language)
+    }
+
+    // Public API language plugin
+    return {
+      translate(key) {
+        // reference state.language, to trigger reactive effects for
+        // translate functions when language is modified
+        state.language
+
+        // reference state.loaded, to trigger reactive effects for
+        // translate functions when language is modified
+        state.loaded
+
+        let replacements = [...arguments].slice(1)
+
+        // no replacements so just translated string
+        if (replacements.length === 0) {
+          return (dictionary && dictionary[key]) || key
+        } else {
+          if (replacements.length === 1 && typeof replacements[0] === 'object') {
+            replacements = replacements.pop()
+          }
+
+          return Object.keys(
+            // maps array input to an object {0: 'item1', 1: 'item2'}
+            Array.isArray(replacements) ? Object.assign({}, replacements) : replacements
+          ).reduce((text, replacementKey) => {
+            return text.replace(
+              new RegExp('{\\s?' + replacementKey + '\\s?}', 'g'),
+              replacements[replacementKey]
+            )
+          }, (dictionary && dictionary[key]) || key)
+        }
+      },
+      get language() {
+        return state.language
+      },
+      set(language) {
+        setLanguage(language)
+      },
+      translations(translationsObject) {
+        setTranslations(translationsObject)
+      },
+      load(file) {
+        return loadLanguageFile(file)
+      },
+    }
+  },
+}

package/src/components/Image.js

@@ -1,52 +0,0 @@
-/*
- * Copyright 2023 Comcast Cable Communications Management, LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import Component from '../component.js'
-
-export default () =>
-  Component('Image', {
-    /* eslint-disable no-unused-vars */
-    code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw) {
-        const elms = []
-        let componentType
-        const rootComponent = component
-        const elementConfig0 = {}
-
-        elms[0] = this.element({ parent: parent || 'root' }, component)
-
-        elementConfig0['imageSource'] = component.imageSource
-        elms[0].populate(elementConfig0)
-        return elms
-      },
-      effects: [
-        function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[0].set('imageSource', component.imageSource)
-        },
-      ],
-      context: {},
-    },
-    props: ['src'],
-    computed: {
-      imageSource() {
-        if (/^(?:https?:)?\/\//i.test(this.src)) {
-          return this.src
-        }
-        return `${window.location.protocol}//${window.location.host}/${this.src}`
-      },
-    },
-  })