Merge branch 'vite' into 'alpha'

Migrate component to Vite

See merge request !148

examples/index.html → index.html

@@ -11,11 +11,12 @@ This page is loaded by Snowpack to display an example usage of the component.
 
     <!-- Load styling framework used by orbit -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@startinblox/orbit-styling-framework/dist/index.css" />
-    <link rel="stylesheet" href="./conversejs/fonts.css">
+    <link rel="stylesheet" href="./src/conversejs/fonts.css">
 
     <!-- Load main component script -->
-    <script type="module" src="index.js"></script>
-    <link rel="stylesheet" href="styles/index.css" />
+    <script type="module" src="./src/index.js"></script>
+    <link rel="stylesheet" href="./src/styles/index.scss" />
+    <link rel="stylesheet" href="./src/conversejs/converse.min.css" />
 
     <script type="module" src="https://cdn.jsdelivr.net/npm/@startinblox/oidc/+esm"></script>
   </head>
@@ -32,7 +33,7 @@ This page is loaded by Snowpack to display an example usage of the component.
         data-auto-login="true"
         data-websocket-url="wss://xmpp-dev.startinblox.com/xmpp-websocket"
         data-src="https://api.tzcld-dev.startinblox.com/users/balessan/"
-        data-debug="true">
+        data-debug="false">
       </solid-xmpp-chat>
     </div>
   </body>

package.json

@@ -50,25 +50,21 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@babel/cli": "^7.10.1",
-    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
-    "@snowpack/plugin-babel": "^2.1.7",
-    "@snowpack/plugin-postcss": "^1.4.3",
-    "autoprefixer": "^10.2.6",
-    "cssnano": "^5.0.6",
-    "postcss": "^8.3.5",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^4.0.0",
-    "snowpack": "^3.5.9",
-    "snowpack-sass-compiler": "^1.0.6"
-  },
   "scripts": {
-    "build": "snowpack build",
-    "watch": "snowpack dev"
+    "watch": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
-  "devDependencies": {
-    "prettier": "2.3.0"
+  "browserslist": [
+    "last 2 Chrome versions"
+  ],
+  "dependencies": {
+    "autoprefixer": "^10.4.17",
+    "cssnano": "^6.0.3",
+    "postcss": "^8.4.33",
+    "postcss-preset-env": "^9.3.0",
+    "postcss-scss": "^4.0.9",
+    "sass": "^1.70.0",
+    "vite": "^4.5.2"
   }
 }

postcss.config.js

-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
-const postcssPresetEnv = require('postcss-preset-env');
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+const postcssPresetEnv = require("postcss-preset-env");
 
 module.exports = {
-  syntax: 'postcss-scss',
-  plugins: [
-    autoprefixer,
-    cssnano,
-    postcssPresetEnv
-  ],
-};
\ No newline at end of file
+  syntax: "postcss-scss",
+  plugins: [autoprefixer, cssnano, postcssPresetEnv],
+};

snowpack.config.js

-// Snowpack Configuration File
-// See all supported options: https://www.snowpack.dev/reference/configuration
-
-/** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
-  exclude: [
-    "**/node_modules/**/*",
-    "**/*.@(spec|test).@(js|mjs|ts|tsx)"
-  ],
-  mount: {
-    examples: { url: '/' },
-    src: { url: '/' },
-  },
-  plugins: [
-    [
-      "@snowpack/plugin-babel",
-      {
-        "input": ['.js', '.mjs', '.jsx', '.ts', '.tsx'],
-        transformOptions: {
-          "plugins": [
-            "@babel/plugin-proposal-optional-chaining"
-          ],
-          "comments": false
-        }
-      },
-    ],
-    '@snowpack/plugin-postcss',
-    [
-      'snowpack-sass-compiler',
-      {
-        useAlias: true,
-        aliasPrefix: '@',
-        compilerOptions: {
-          outputStyle: 'compressed',
-          includePaths: [],
-        },
-      },
-    ]
-  ],
-  packageOptions: {
-    polyfillNode: true,
-  },
-  buildOptions: {
-    out: 'dist'
-  },
-};

src/index.js

-import("./solid-xmpp-chat.js");
\ No newline at end of file
+import './styles/index.scss';
+import './conversejs/converse.min.css';
+import('./utils.js').then(utils => {
+  import(/* @vite-ignore */utils.coreVersion()).then(async (core) => {
+    core.Helpers.importCSS(utils.path() + '/style.css?min');
+    await import("./solid-xmpp-chat.js");
+  });
+});

src/solid-xmpp-chat.js

 import('./utils.js').then(utils => {
-  import(utils.coreVersion()).then(async (core) => {
+  import(/* @vite-ignore */utils.coreVersion()).then(async (core) => {
 
     await import('./conversejs/converse.js');
     await import('./conversejs/emojis.js');
@@ -59,8 +59,6 @@ import('./utils.js').then(utils => {
         const check_identified = await document.querySelector('sib-auth').getUserIdToken();
         if (check_identified) {
           this.element.attachShadow({ mode: 'open' });
-          this.importCSS(`${utils.path()}/conversejs/converse.min.css?min`);
-          this.importCSS(`${utils.path()}/styles/index.css?min`);
           if (typeof converse_sib === 'undefined') {
             this.initializeConverse();
           }
@@ -191,7 +189,7 @@ import('./utils.js').then(utils => {
           }
 
           const converseSettings = {
-            'assets_path': (/skypack/.test(utils.path()) ? utils.path().replace('cdn.skypack.dev', 'unpkg.com') : utils.path()) + '/conversejs/',
+            'assets_path': 'https://unpkg.com/@startinblox/component-chat/src/conversejs/',
             'authentication': this.element.dataset.authentication || 'login',
             'password': idToken,
             'allow_bookmarks': false,

src/utils.js

@@ -27,6 +27,9 @@ export function coreVersion() {
 export function setupOrbit(component) {
   if(window.orbit) {
     component.localize = (key) => {
+      if(!key in component.strings) {
+        console.warn(`Missing location string: ${key}`);
+      }
       return window.orbit.intl.t(`${componentName}.${key}`) || component.strings[key] || key;
     }
     component.getRoute = window.orbit.getRoute;

vite.config.js

+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true,
+      },
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.js"),
+      name: JSON.stringify(process.env.npm_package_name),
+      fileName: () => "index.js",
+    },
+  },
+});