refactor: change element prefix to web

.vscode/settings.json

@@ -7,5 +7,8 @@
     { "language": "typescript", "autoFix": true },
     { "language": "typescriptreact", "autoFix": true }
   ],
-  "javascript.implicitProjectConfig.experimentalDecorators": true
+  "javascript.implicitProjectConfig.experimentalDecorators": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

package.json

@@ -51,6 +51,8 @@
     "@babel/core": "^7.2.2",
     "@bndynet/typedoc-default-themes": "^0.5.1",
     "@commitlint/cli": "^7.1.2",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/git": "^7.0.8",
     "@types/jest": "^23.3.12",
@@ -78,11 +80,9 @@
     "postcss": "^7.0.14",
     "prettier": "^1.15.3",
     "rimraf": "^2.6.2",
-    "rollup": "^0.67.0",
+    "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.0",
-    "rollup-plugin-commonjs": "^9.1.8",
     "rollup-plugin-json": "^3.1.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-sass": "^1.1.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-terser": "^4.0.2",

rollup.config.ts

@@ -1,5 +1,5 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import typescript from 'rollup-plugin-typescript2';
 import json from 'rollup-plugin-json';
@@ -10,6 +10,7 @@ import postcss from 'postcss';
 import { terser } from 'rollup-plugin-terser';
 
 const pkg = require('./package.json');
+const config = require('./src/config.js');
 
 const libraryName = pkg.name.indexOf('/') > 0 ? pkg.name.split('/')[1].toLocaleLowerCase() : pkg.name.toLocaleLowerCase();
 
@@ -36,13 +37,17 @@ export default {
   plugins: [
     sass({
       output: `dist/${libraryName}.css`,
-      processor: css =>
-        postcss([autoprefixer])
+      options: {
+        data: `$prefix: '${config.elementPrefix}';`,
+      },
+      processor: css => {
+        return postcss([autoprefixer])
           .process(
             css,
             { from: undefined }, // fix PostCSS without `from` warning
           )
-          .then(result => result.css),
+          .then(result => result.css);
+      },
     }),
     terser(),
     // Allow json resolution
@@ -52,9 +57,15 @@ export default {
       tsconfig: './tsconfig.json',
       useTsconfigDeclarationDir: true,
     }),
+
+    // Allow node_modules resolution, so you can use "external" to control
+    // which external modules to include in the bundle
+    // https://github.com/rollup/rollup-plugin-node-resolve#usage
+    resolve(),
+
     // Allow bundling cjs modules (unlike webpack, rollup doesn"t understand cjs)
     commonjs({
-      include: 'node_modules/**',
+      include: ['node_modules/**', './src/**'],
       namedExports: {
         // "node_modules/react/index.js": [
         //   "Component",
@@ -67,10 +78,6 @@ export default {
         // ],
       },
     }),
-    // Allow node_modules resolution, so you can use "external" to control
-    // which external modules to include in the bundle
-    // https://github.com/rollup/rollup-plugin-node-resolve#usage
-    resolve(),
 
     babel({
       exclude: 'node_modules/**',

site/Components/Buttons.html

@@ -1,4 +1,4 @@
-<ui-button text="Submit"></ui-button>
-<ui-button text="Submit" disabled></ui-button>
-<ui-button theme="danger" text="Download"></ui-button>
-<ui-button pending theme="danger" text="Download"></ui-button>
+<web-button text="Submit"></web-button>
+<web-button text="Submit" disabled></web-button>
+<web-button theme="danger" text="Download"></web-button>
+<web-button pending theme="danger" text="Download"></web-button>

site/Components/Indicators.html

@@ -1,9 +1,9 @@
-<ui-indicator length="5"></ui-indicator>
-<ui-indicator class="square" theme="primary" length="5" active="1"></ui-indicator>
-<ui-indicator class="rectangle" theme="success" length="3" active="2"></ui-indicator>
-<ui-indicator class="bg-dark" theme="light" length="5"></ui-indicator>
+<web-indicator length="5"></web-indicator>
+<web-indicator class="square" theme="primary" length="5" active="1"></web-indicator>
+<web-indicator class="rectangle" theme="success" length="3" active="2"></web-indicator>
+<web-indicator class="bg-dark" theme="light" length="5"></web-indicator>
 <script>
-  const indicators = document.querySelector('ui-indicator');
+  const indicators = document.querySelector('web-indicator');
   indicators.addEventListener('index-changed', function(e) {
     console.debug(e.detail);    // output: {index: 0}
   });

site/Components/Input.html

@@ -1,7 +1,7 @@
-<ui-input tips="No label" value="value"></ui-input>
-<ui-input label="User name" prefix="@" placeholder="Type your name..." tips="Please type your full name"></ui-input>
-<ui-input label="Total" prefix="$" suffix=".00"></ui-input>
-<ui-input label="Required <span style='color:red;'>*</span>" required required-message="This is a required field."></ui-input>
-<ui-input id="email" label="Email" tips="Your primary email address." pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></ui-input>
-<ui-input label="Email" value="invalid email" validate pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></ui-input>
-<ui-input label="Color" value="#000" type="color-text"></ui-input>
+<web-input tips="No label" value="value"></web-input>
+<web-input label="User name" prefix="@" placeholder="Type your name..." tips="Please type your full name"></web-input>
+<web-input label="Total" prefix="$" suffix=".00"></web-input>
+<web-input label="Required <span style='color:red;'>*</span>" required required-message="This is a required field."></web-input>
+<web-input id="email" label="Email" tips="Your primary email address." pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></web-input>
+<web-input label="Email" value="invalid email" validate pattern=".+@\w+\.\w+" pattern-message="Invalid email format."></web-input>
+<web-input label="Color" value="#000" type="color-text"></web-input>

site/Components/Loading.html

@@ -1,14 +1,14 @@
 <div class="bg-light p-4 border">
-  <ui-loading></ui-loading>
+  <web-loading></web-loading>
   Here to show your data.
 </div>
 <br />
 <div class="bg-light p-4 border">
-  <ui-loading theme="danger"></ui-loading>
+  <web-loading theme="danger"></web-loading>
   Here to show your data.
 </div>
 <br />
 <div class="bg-light p-4 border" style="border-top-left-radius: 15px;">
-  <ui-loading theme="dark"></ui-loading>
+  <web-loading theme="dark"></web-loading>
   Here to show your data.
 </div>