Merge pull request #16 from custom-cards/christmas-update

Christmas update

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"

rollup.config.dev.js

@@ -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': '*',
-      },
-    }),
-  ],
-};

rollup.config.js

@@ -1,20 +1,42 @@
-import resolve from "rollup-plugin-node-resolve";
+import typescript from 'rollup-plugin-typescript2';
-import typescript from "rollup-plugin-typescript2";
+import commonjs from 'rollup-plugin-commonjs';
-import babel from "rollup-plugin-babel";
+import nodeResolve from 'rollup-plugin-node-resolve';
-import { terser } from "rollup-plugin-terser";
+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 {
+const dev = process.env.ROLLUP_WATCH;
-  input: ["src/boilerplate-card.ts"],
+
-  output: {
+const serveopts = {
-    dir: "./dist",
+  contentBase: ['./dist'],
-    format: "es"
+  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],
+  },
+];

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`
         <ha-card>
-          <div class="warning">Show Warning</div>
+          <div class="warning">${localize('common.show_warning')}</div>
         </ha-card>
       `;
     }

src/localize/languages/en.json

@@ -0,0 +1,7 @@
+{
+  "common": {
+    "version": "Version",
+    "invalid_configuration": "Invalid configuration",
+    "show_warning": "Show Warning"
+  }
+}

src/localize/languages/nb.json

@@ -0,0 +1,7 @@
+{
+  "common": {
+    "version": "Versjon",
+    "invalid_configuration": "Ikke gyldig konfiguration",
+    "show_warning": "Vis advarsel"
+  }
+}

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;
+}