@lightningjs/blits 1.0.0 → 1.2.0

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/vite/index.js

@@ -15,13 +15,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
-
 import preCompiler from './preCompiler.js'
 import msdfGenerator from './msdfGenerator.js'
 
-export { importChunkUrl as importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
 export { default as preCompiler } from './preCompiler.js'
 export { default as msdfGenerator } from './msdfGenerator.js'
 
-export default [importChunkUrl(), preCompiler(), msdfGenerator()]
+export default [preCompiler(), msdfGenerator()]

package/vite/preCompiler.js

@@ -16,6 +16,7 @@
  */
 
 import compiler from '../src/lib/precompiler/precompiler.js'
+import path from 'path'
 
 export default function () {
   let config
@@ -26,7 +27,8 @@ export default function () {
     },
     transform(source, filePath) {
       if (config.blits && config.blits.precompile === false) return source
-      return compiler(source, filePath)
+      const relativePath = path.relative(process.cwd(), filePath)
+      return compiler(source, relativePath)
     },
   }
 }

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}`
-      },
-    },
-  })