feat: upgrade for new version VueFront

.browserslistrc

@@ -0,0 +1,6 @@
+>1%
+last 2 major versions
+node 10
+not dead
+not op_mini all
+not ie 11

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "root": true,
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "prettier",
+    "plugin:prettier/recommended"
+  ]
+}

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/schema.graphql
+/.graphqlconfig
+
+# Storybook
+/storybook-static

.vscode/tasks.json

@@ -1,25 +1,16 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
     // for the documentation about the tasks.json format
     // `YOUR_THEME_NAME` - your theme name. ex. `myvuefront`
     // `YOUR_VUEFRONT_WEBAPP_TEST_FOLDER` - your vuefront web app test folder in VSCODE Workspace. ex. `myvuefront-theme-test`
     // `YOUR_THEME_NPM_NAME` - your NPM package name. ex. `vuefront-myvuefront-theme`
     "version": "2.0.0",
     "tasks": [
         {
-            "label": "YOUR_THEME_NAME Theme Build",
+            "label": "YOUR_THEME_NAME Theme Watch",
             "type": "npm",
-            "script": "build",
+            "script": "watch",
             "problemMatcher": []
-        },
-        {
-            "label": "YOUR_THEME_NAME Theme Sync",
-            "type": "shell",
-            "command": "sync-glob '**/*' '!node_modules/**/*' '../YOUR_VUEFRONT_WEBAPP_TEST_FOLDER/node_modules/YOUR_THEME_NPM_NAME' --watch --delete",
-            "problemMatcher": [],
-            "presentation": {
-                "group": "Front"
-            }
         }
     ]
-}
+}

README.md

@@ -33,7 +33,7 @@ Name your theme in the following pattern:
 
 1. `.vscode/tasks.json` - will add task to your VS Code. We recommend installing a VS Code plugin `tasks` to see these tasks in the status bar for ease of access.
 2. `package.json`
-3. `src/index.js`
+3. `index.js`
 
 You will need to edit these veriables
 
@@ -95,4 +95,4 @@ Developing a theme is similar to customizing your VueFront Web App.
 2. You can add your CSS styles in `assets/css/main.scss`
 
 ### 3. Publish
-Publishing is easy. Just upgrade your version in `package.json` and rund command `npm publish`
+Publishing is easy. Just upgrade your version in `package.json` and rund command `npm publish`

babel.config.js

@@ -1,23 +1,73 @@
-module.exports = (api) => {
-  api.cache(false);
+const vuefrontPackage = require("./package.json");
 
-  return {
-    presets: [],
-    env: {
-      es: {
-        plugins: [['@babel/plugin-transform-modules-commonjs', { loose: true }]]
+module.exports = {
+  assumptions: {
+    noDocumentAll: true,
+  },
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: false,
       },
-      esm: {
-        presets: [['@babel/env', { modules: false }]]
+    ],
+    "@babel/preset-typescript",
+  ],
+  plugins: [
+    [
+      "transform-define",
+      {
+        __VUEFRONT_VERSION__: vuefrontPackage.version,
+        __REQUIRED_VUE__: vuefrontPackage.peerDependencies.vue,
       },
-      test: {
-        presets: [['@babel/env', { targets: { node: 'current' } }]]
-      }
+    ],
+    [
+      "module-resolver",
+      {
+        root: ["."],
+        alias: {
+          "@": "./src",
+        },
+      },
+    ],
+  ],
+  env: {
+    test: {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            targets: { node: true },
+            modules: "commonjs",
+          },
+        ],
+      ],
+    },
+    lib: {
+      plugins: [
+        [
+          "babel-plugin-transform-remove-imports",
+          {
+            test: ["vuefront-api", "vuefront-store"],
+          },
+        ],
+        [
+          "./build/babel-plugin-add-import-extension",
+          {
+            extension: "mjs",
+            ignoreExtension: ["json"],
+          },
+        ],
+        [
+          "./build/babel-plugin-replace-import-extension",
+          {
+            extMapping: {
+              ".sass": ".css",
+              ".scss": ".css",
+            },
+          },
+        ],
+      ],
     },
-    plugins: [
-      'transform-inline-environment-variables',
-      'minify-dead-code-elimination',
-      '@babel/plugin-transform-runtime'
-    ]
-  }
-}
+  },
+};

build/babel-plugin-add-import-extension.js

@@ -0,0 +1,135 @@
+const { declare } = require("@babel/helper-plugin-utils");
+const {
+  types: {
+    importDeclaration,
+    exportNamedDeclaration,
+    exportAllDeclaration,
+    stringLiteral,
+  },
+} = require("@babel/core");
+const { existsSync, lstatSync } = require("fs");
+const { resolve, extname, dirname } = require("path");
+
+const isActiveExtension = (module, observedScriptExtensions) =>
+  observedScriptExtensions.indexOf(extname(module).replace(/[^a-z]/, "")) > -1;
+
+const isNodeModule = (module) => {
+  if (module.startsWith(".") || module.startsWith("/")) {
+    return false;
+  }
+
+  try {
+    require.resolve(module);
+    return true;
+  } catch (e) {
+    if (e.code === "MODULE_NOT_FOUND") {
+      return false;
+    }
+    console.error(e);
+  }
+};
+
+const skipModule = (
+  module,
+  { ignoreExtension, replace, extension, observedScriptExtensions }
+) =>
+  !module.startsWith(".") ||
+  isNodeModule(module) ||
+  isActiveExtension(module, ignoreExtension) ||
+  (replace &&
+  (isActiveExtension(module, observedScriptExtensions) ||
+    extname(module) === `.${extension}`)
+    ? extname(module) === `.${extension}`
+    : extname(module).length &&
+      (isActiveExtension(module, observedScriptExtensions) ||
+        extname(module) === `.${extension}`) &&
+      extname(module) === `.${extension}`);
+
+const makeDeclaration =
+  ({
+    declaration,
+    args,
+    replace = false,
+    extension = "js",
+    ignoreExtension = [],
+    observedScriptExtensions = ["js", "ts", "jsx", "tsx", "mjs", "cjs"],
+  }) =>
+  (
+    path,
+    {
+      file: {
+        opts: { filename },
+      },
+    }
+  ) => {
+    const { node } = path;
+    const { source, exportKind, importKind } = node;
+
+    const isTypeOnly = exportKind === "type" || importKind === "type";
+
+    if (!source || isTypeOnly) {
+      return;
+    }
+
+    const module = source && source.value;
+
+    if (
+      skipModule(module, {
+        ignoreExtension,
+        replace,
+        extension,
+        observedScriptExtensions,
+      })
+    ) {
+      return;
+    }
+
+    const dirPath = resolve(dirname(filename), module);
+
+    const hasModuleExt =
+      extname(module).length &&
+      isActiveExtension(module, observedScriptExtensions);
+    const newModuleName = hasModuleExt
+      ? module.slice(0, -extname(module).length)
+      : module;
+
+    const pathLiteral = () => {
+      if (existsSync(dirPath) && lstatSync(dirPath).isDirectory()) {
+        return `${module}${
+          newModuleName.endsWith("/") ? "" : "/"
+        }index.${extension}`;
+      }
+
+      return `${newModuleName}.${extension}`;
+    };
+
+    path.replaceWith(declaration(...args(path), stringLiteral(pathLiteral())));
+  };
+
+module.exports = declare((api, options) => {
+  api.assertVersion(7);
+
+  return {
+    name: "add-import-extension",
+    visitor: {
+      ImportDeclaration: makeDeclaration({
+        ...options,
+        declaration: importDeclaration,
+        args: ({ node: { specifiers } }) => [specifiers],
+      }),
+      ExportNamedDeclaration: makeDeclaration({
+        ...options,
+        declaration: exportNamedDeclaration,
+        args: ({ node: { declaration, specifiers } }) => [
+          declaration,
+          specifiers,
+        ],
+      }),
+      ExportAllDeclaration: makeDeclaration({
+        ...options,
+        declaration: exportAllDeclaration,
+        args: () => [],
+      }),
+    },
+  };
+});