Merge remote-tracking branch 'origin/dev'

Author: juzser

.eslintignore

@@ -11,3 +11,4 @@ README.md
 .storybook
 yarn.lock
 tsconfig.json
+tsconfig.vite-config.json

.postcssrc.js

@@ -10,7 +10,8 @@ module.exports = {
       generateScopedName: classConfig,
       getJSON: (cssFileName, json) => {
         /* Ignore generate common polaris tokens style file */
-        if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1) {
+        if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1 || cssFileName.indexOf('CustomProperties') !== -1) {
+          console.log(cssFileName);
           return;
         }
 

.storybook/main.js

@@ -31,6 +31,13 @@ module.exports = {
       output: {
         publicPath: '/polaris-vue',
       },
+      css: {
+        preprocessorOptions: {
+          scss: {
+            quietDeps: true, // Silent the deprecation warning
+          },
+        },
+      },
       resolve: { ...config.resolve },
       plugins: [
         svgLoader(),

build/gen-component-declaration.js

@@ -0,0 +1,79 @@
+// Based on Naive UI gen component declaration file.
+// https://github.com/TuSimple/naive-ui
+
+import path from 'path';
+import fs from 'fs-extra';
+import process from 'process';
+// import * as globalComponents from '../src/components';
+
+const TYPE_ROOT = process.cwd();
+
+const packageName = '@ownego/polaris-vue';
+const fileName = 'volar.d.ts';
+
+const excludeComponents = [];
+
+function exist (path) {
+  return fs.existsSync(path);
+}
+
+function parseComponentsDeclaration (code) {
+  if (!code) {
+    return {};
+  }
+  return Object.fromEntries(
+    Array.from(code.matchAll(/(?<!\/\/)\s+\s+['"]?(.+?)['"]?:\s(.+?)\n/g)).map(
+      (i) => [i[1], i[2]]
+    )
+  );
+}
+
+async function generateComponentsType () {
+  const mainImports = await fs.readFile(path.resolve(TYPE_ROOT, 'src/components/index.ts'), 'utf-8');
+
+  const pattern = /\'\.\/(.*)\'/g;
+
+  const components = {};
+
+  // Get all component names
+  const componentList = mainImports.match(pattern).map((i) => i.replace(/[^\w]/g, ''));
+
+  componentList.forEach((key) => {
+    const entry = `typeof import('${packageName}')['${key}']`
+    if (!excludeComponents.includes(key)) {
+      components[key] = entry;
+    }
+  });
+
+  const originalContent = exist(path.resolve(TYPE_ROOT, fileName))
+    ? await fs.readFile(path.resolve(TYPE_ROOT, fileName), 'utf-8')
+    : '';
+
+  const originImports = parseComponentsDeclaration(originalContent);
+  const lines = Object.entries({
+    ...originImports,
+    ...components
+  })
+    .filter(([name]) => {
+      return components[name]
+    })
+    .map(([name, v]) => {
+      if (!/^\w+$/.test(name)) {
+        name = `'${name}'`
+      }
+      return `${name}: ${v}`
+    });
+  const code = `// Auto generated component declarations
+declare module 'vue' {
+  export interface GlobalComponents {
+    ${lines.join('\n    ')}
+    [key: string]: any
+  }
+}
+export {}
+`;
+  if (code !== originalContent) {
+    await fs.writeFile(path.resolve(TYPE_ROOT, fileName), code, 'utf-8');
+  }
+}
+generateComponentsType()

build/namespaced-classname.js

@@ -11,6 +11,10 @@ const NESTED_COMPONENT_PATH_REGEX = /.*\/components\/(.*)\/components/;
 const scopedHashes = {};
 
 module.exports = function generateScopedName(name, filename, css) {
+  if (filename.includes('@shopify/polaris-tokens') || filename.includes('CustomProperties')) {
+    return name;
+  }
+
   const parseName = name.split('_');
   const originalName = parseName.length > 1 ? parseName[1] : name;
 

package.json

@@ -15,6 +15,7 @@
   "files": [
     "dist",
     "package.json",
+    "volar.d.ts",
     "LICENSE",
     "README.md"
   ],
@@ -23,12 +24,15 @@
   "module": "./dist/polaris-vue.es.js",
   "scripts": {
     "dev": "vite",
-    "build": "rimraf dist && vue-tsc --noEmit && vite build && rimraf dist/index.html dist/favicon.ico dist/images",
+    "build": "rimraf dist && vue-tsc --noEmit && vite build && npm run gen-volar-dts && npm run remove-trashes",
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "rimraf ./docs && build-storybook -o docs"
+    "build-storybook": "rimraf ./docs && build-storybook -o docs",
+    "gen-volar-dts": "esbuild build/gen-component-declaration.js --bundle --platform=node | node && npm run move-volar-dts",
+    "move-volar-dts": "mv volar.d.ts dist/volar.d.ts",
+    "remove-trashes": "rimraf dist/index.html dist/favicon.ico dist/images"
   },
   "dependencies": {
     "@shopify/polaris-icons": "^4.22.0",
@@ -38,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "^7.17.5",
     "@rushstack/eslint-patch": "^1.1.0",
-    "@shopify/polaris-tokens": "^5.0.1",
+    "@shopify/polaris-tokens": "^5.1.1",
     "@shopify/typescript-configs": "^5.1.0",
     "@storybook/addon-a11y": "^6.5.5",
     "@storybook/addon-actions": "^6.5.5",
@@ -59,12 +63,14 @@
     "eslint": "^8.10.0",
     "eslint-plugin-storybook": "^0.5.12",
     "eslint-plugin-vue": "^8.5.0",
+    "fs-extra": "^10.1.0",
     "hash-generator": "^0.1.0",
     "path": "^0.12.7",
     "polaris": "https://github.com/juzser/polaris.git",
     "postcss": "^7",
     "postcss-modules": "^3",
     "prettier": "^2.5.1",
+    "process": "^0.11.10",
     "rimraf": "^3.0.2",
     "sass": "^1.49.8",
     "ts-dedent": "^2.2.0",

src/classes/BulkActions.json

@@ -0,0 +1 @@
+{"Group":"Polaris-BulkActions__Group","Group-measuring":"Polaris-BulkActions__Group--measuring","Group-entering":"Polaris-BulkActions__Group--entering","Group-exiting":"Polaris-BulkActions__Group--exiting","Group-entered":"Polaris-BulkActions__Group--entered","Group-exited":"Polaris-BulkActions__Group--exited","Group-smallScreen":"Polaris-BulkActions__Group--smallScreen","Group-largeScreen":"Polaris-BulkActions__Group--largeScreen","ButtonGroupWrapper":"Polaris-BulkActions__ButtonGroupWrapper","BulkActionButton":"Polaris-BulkActions__BulkActionButton","CheckableContainer":"Polaris-BulkActions__CheckableContainer","disabled":"Polaris-BulkActions--disabled","PaginatedSelectAll":"Polaris-BulkActions__PaginatedSelectAll","Slide":"Polaris-BulkActions__Slide","Slide-appear":"Polaris-BulkActions__Slide--appear","Slide-enter":"Polaris-BulkActions__Slide--enter","Slide-exit":"Polaris-BulkActions__Slide--exit","Slide-appearing":"Polaris-BulkActions__Slide--appearing","Slide-entering":"Polaris-BulkActions__Slide--entering"}

src/classes/CheckableButton.json

@@ -0,0 +1 @@
+{"CheckableButton":"Polaris-CheckableButton","CheckableButton-measuring":"Polaris-CheckableButton__CheckableButton--measuring","CheckableButton-plain":"Polaris-CheckableButton__CheckableButton--plain","CheckableButton-selectMode":"Polaris-CheckableButton__CheckableButton--selectMode","CheckableButton-selected":"Polaris-CheckableButton__CheckableButton--selected","Checkbox":"Polaris-CheckableButton__Checkbox","Label":"Polaris-CheckableButton__Label"}

src/classes/ChoiceList.json

@@ -1 +1 @@
-{"ChoiceList":"Polaris-ChoiceList","titleHidden":"Polaris-ChoiceList--titleHidden","Title":"Polaris-ChoiceList__Title","Choices":"Polaris-ChoiceList__Choices","ChoiceChildren":"Polaris-ChoiceList__ChoiceChildren","ChoiceError":"Polaris-ChoiceList__ChoiceError"}
+{"ChoiceList":"Polaris-ChoiceList","ChoiceItem":"Polaris-ChoiceList__ChoiceItem","titleHidden":"Polaris-ChoiceList--titleHidden","Title":"Polaris-ChoiceList__Title","Choices":"Polaris-ChoiceList__Choices","ChoiceChildren":"Polaris-ChoiceList__ChoiceChildren","ChoiceError":"Polaris-ChoiceList__ChoiceError"}

src/classes/TextField.json

@@ -1 +1 @@
-{"TextField":"Polaris-TextField","multiline":"Polaris-TextField--multiline","Input":"Polaris-TextField__Input","hasValue":"Polaris-TextField--hasValue","focus":"Polaris-TextField--focus","VerticalContent":"Polaris-TextField__VerticalContent","Backdrop":"Polaris-TextField__Backdrop","error":"Polaris-TextField--error","readOnly":"Polaris-TextField--readOnly","disabled":"Polaris-TextField--disabled","Prefix":"Polaris-TextField__Prefix","suggestion":"Polaris-TextField--suggestion","Input-hasClearButton":"Polaris-TextField__Input--hasClearButton","Input-suffixed":"Polaris-TextField__Input--suffixed","Input-alignRight":"Polaris-TextField__Input--alignRight","Input-alignLeft":"Polaris-TextField__Input--alignLeft","Input-alignCenter":"Polaris-TextField__Input--alignCenter","Suffix":"Polaris-TextField__Suffix","CharacterCount":"Polaris-TextField__CharacterCount","AlignFieldBottom":"Polaris-TextField__AlignFieldBottom","ClearButton":"Polaris-TextField__ClearButton","Hidden":"Polaris-TextField__Hidden","Spinner":"Polaris-TextField__Spinner","SpinnerIcon":"Polaris-TextField__SpinnerIcon","Resizer":"Polaris-TextField__Resizer","DummyInput":"Polaris-TextField__DummyInput","Segment":"Polaris-TextField__Segment","monospaced":"Polaris-TextField--monospaced"}
+{"TextField":"Polaris-TextField","multiline":"Polaris-TextField--multiline","Input":"Polaris-TextField__Input","hasValue":"Polaris-TextField--hasValue","focus":"Polaris-TextField--focus","VerticalContent":"Polaris-TextField__VerticalContent","Backdrop":"Polaris-TextField__Backdrop","error":"Polaris-TextField--error","readOnly":"Polaris-TextField--readOnly","disabled":"Polaris-TextField--disabled","Prefix":"Polaris-TextField__Prefix","suggestion":"Polaris-TextField--suggestion","Input-hasClearButton":"Polaris-TextField__Input--hasClearButton","Input-suffixed":"Polaris-TextField__Input--suffixed","Input-alignRight":"Polaris-TextField__Input--alignRight","Input-alignLeft":"Polaris-TextField__Input--alignLeft","Input-alignCenter":"Polaris-TextField__Input--alignCenter","Suffix":"Polaris-TextField__Suffix","CharacterCount":"Polaris-TextField__CharacterCount","AlignFieldBottom":"Polaris-TextField__AlignFieldBottom","ClearButton":"Polaris-TextField__ClearButton","Spinner":"Polaris-TextField__Spinner","SpinnerIcon":"Polaris-TextField__SpinnerIcon","Resizer":"Polaris-TextField__Resizer","DummyInput":"Polaris-TextField__DummyInput","Segment":"Polaris-TextField__Segment","monospaced":"Polaris-TextField--monospaced"}