diff --git a/package.json b/package.json index f0820918..ffdcfb4b 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@babel/core": "^7.6.4", "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-proposal-decorators": "^7.4.0", + "@rollup/plugin-json": "^4.0.0", "@typescript-eslint/eslint-plugin": "^2.6.0", "@typescript-eslint/parser": "^2.6.0", "eslint": "^6.6.0", @@ -34,6 +35,7 @@ "prettier": "^1.18.2", "rollup": "^1.26.0", "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-serve": "^1.0.1", "rollup-plugin-terser": "^5.1.2", @@ -42,7 +44,7 @@ "typescript": "^3.6.4" }, "scripts": { - "start": "rollup -c rollup.config.dev.js --watch", + "start": "rollup -c --watch", "build": "npm run lint && npm run rollup", "lint": "eslint src/*.ts", "rollup": "rollup -c" diff --git a/rollup.config.dev.js b/rollup.config.dev.js deleted file mode 100644 index 7e2433a8..00000000 --- a/rollup.config.dev.js +++ /dev/null @@ -1,24 +0,0 @@ -import resolve from 'rollup-plugin-node-resolve'; -import typescript from 'rollup-plugin-typescript2'; -import serve from 'rollup-plugin-serve'; - -export default { - input: ['src/boilerplate-card.ts'], - output: { - dir: './dist', - format: 'es', - }, - plugins: [ - resolve(), - typescript(), - serve({ - contentBase: './dist', - host: '0.0.0.0', - port: 5000, - allowCrossOrigin: true, - headers: { - 'Access-Control-Allow-Origin': '*', - }, - }), - ], -}; diff --git a/rollup.config.js b/rollup.config.js index 41a126ee..5586c3cb 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,20 +1,42 @@ -import resolve from "rollup-plugin-node-resolve"; -import typescript from "rollup-plugin-typescript2"; -import babel from "rollup-plugin-babel"; -import { terser } from "rollup-plugin-terser"; +import typescript from 'rollup-plugin-typescript2'; +import commonjs from 'rollup-plugin-commonjs'; +import nodeResolve from 'rollup-plugin-node-resolve'; +import babel from 'rollup-plugin-babel'; +import { terser } from 'rollup-plugin-terser'; +import serve from 'rollup-plugin-serve'; +import json from '@rollup/plugin-json'; -export default { - input: ["src/boilerplate-card.ts"], - output: { - dir: "./dist", - format: "es" +const dev = process.env.ROLLUP_WATCH; + +const serveopts = { + contentBase: ['./dist'], + host: '0.0.0.0', + port: 5000, + allowCrossOrigin: true, + headers: { + 'Access-Control-Allow-Origin': '*', }, - plugins: [ - resolve(), - typescript(), - babel({ - exclude: "node_modules/**" - }), - terser(), - ] }; + +const plugins = [ + nodeResolve({}), + commonjs(), + typescript(), + json(), + babel({ + exclude: 'node_modules/**', + }), + dev && serve(serveopts), + !dev && terser(), +]; + +export default [ + { + input: 'src/boilerplate-card.ts', + output: { + dir: 'dist', + format: 'es', + }, + plugins: [...plugins], + }, +]; diff --git a/src/boilerplate-card.ts b/src/boilerplate-card.ts index c87ad4c4..f5add909 100644 --- a/src/boilerplate-card.ts +++ b/src/boilerplate-card.ts @@ -15,9 +15,11 @@ import { BoilerplateCardConfig } from './types'; import { actionHandler } from './action-handler-directive'; import { CARD_VERSION } from './const'; +import { localize } from './localize/localize'; + /* eslint no-console: 0 */ console.info( - `%c BOILERPLATE-CARD \n%c Version ${CARD_VERSION} `, + `%c BOILERPLATE-CARD \n%c ${localize('common.version')} ${CARD_VERSION} `, 'color: orange; font-weight: bold; background: black', 'color: white; font-weight: bold; background: dimgray', ); @@ -40,7 +42,7 @@ export class BoilerplateCard extends LitElement { public setConfig(config: BoilerplateCardConfig): void { // TODO Check for required fields and that they are of the proper format if (!config || config.show_error) { - throw new Error('Invalid configuration'); + throw new Error(localize('common.invalid_configuration')); } if (config.test_gui) { @@ -66,7 +68,7 @@ export class BoilerplateCard extends LitElement { if (this._config.show_warning) { return html` -
Show Warning
+
${localize('common.show_warning')}
`; } diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json new file mode 100644 index 00000000..d5440f55 --- /dev/null +++ b/src/localize/languages/en.json @@ -0,0 +1,7 @@ +{ + "common": { + "version": "Version", + "invalid_configuration": "Invalid configuration", + "show_warning": "Show Warning" + } +} diff --git a/src/localize/languages/nb.json b/src/localize/languages/nb.json new file mode 100644 index 00000000..d8b72642 --- /dev/null +++ b/src/localize/languages/nb.json @@ -0,0 +1,7 @@ +{ + "common": { + "version": "Versjon", + "invalid_configuration": "Ikke gyldig konfiguration", + "show_warning": "Vis advarsel" + } +} diff --git a/src/localize/localize.ts b/src/localize/localize.ts new file mode 100644 index 00000000..55cf5331 --- /dev/null +++ b/src/localize/localize.ts @@ -0,0 +1,29 @@ +import * as en from './languages/en.json'; +import * as nb from './languages/nb.json'; + +var languages = { + en: en, + nb: nb, +}; + +export function localize(string: string, search: string = '', replace: string = '') { + const section = string.split('.')[0]; + const key = string.split('.')[1]; + + const lang = (localStorage.getItem('selectedLanguage') || 'en').replace(/['"]+/g, '').replace('-', '_'); + + var tranlated: string; + + try { + tranlated = languages[lang][section][key]; + } catch (e) { + tranlated = languages['en'][section][key]; + } + + if (tranlated === undefined) tranlated = languages['en'][section][key]; + + if (search !== '' && replace !== '') { + tranlated = tranlated.replace(search, replace); + } + return tranlated; +}