@zipify/wysiwyg 4.1.0 → 4.2.0

package/.editorconfig

@@ -10,7 +10,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.{js,html,vue,css,svg}]
+[*.{js,ts,html,vue,css,svg}]
 indent_size = 4
 tab_width = 4
 

package/.eslintignore

@@ -1 +1,2 @@
 dist/**
+.eslintrc.js

package/.eslintrc.js

@@ -1,21 +1,42 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
 const appPackage = require('./package.json');
 
 const jestVersion = appPackage.devDependencies.jest.replace('^', '');
 const jestMajorVersion = Number(jestVersion.split('.')[0]);
 
+const tsParserOptions = {
+    project: './tsconfig.json',
+    extraFileExtensions: ['.vue']
+};
+
 module.exports = {
+    root: true,
     settings: {
         'import/resolver': {
+            alias: {
+                map: {
+                    '@': './lib'
+                }
+            },
             node: {
-                extensions: ['.js', '.css', '.vue', '.html']
+                extensions: [
+                    '.js',
+                    '.ts',
+                    '.css',
+                    '.vue',
+                    '.html'
+                ]
             }
         },
         jest: {
             version: jestMajorVersion
         }
     },
+    env: {
+        jest: true
+    },
     globals: {
-        jest: true,
         globalThis: true,
         ZW_UPDATED_AT: true
     },
@@ -25,12 +46,50 @@ module.exports = {
             extends: ['@zipify/eslint-config/preset-js']
         },
         {
-            files: '*.test.js',
+            files: '*.ts',
+            extends: ['@zipify/eslint-config/preset-ts']
+        },
+        {
+            files: '*.test.{js,ts}',
             extends: ['@zipify/eslint-config/preset-jest']
         },
         {
             files: '*.vue',
-            extends: ['@zipify/eslint-config/preset-vue3']
+            extends: ['@zipify/eslint-config/preset-vue3-ts'],
+            parserOptions: {
+                parser: '@typescript-eslint/parser',
+                parserOptions: tsParserOptions
+            },
+            rules: {
+                // Temporary disable rules for js to ts migration
+                '@typescript-eslint/explicit-function-return-type': 'off',
+                'import/extensions': 'off'
+            }
+        },
+        {
+            files: '*.{js,ts,vue}',
+            parserOptions: tsParserOptions,
+            rules: {
+                'import/order': [
+                    'error',
+                    {
+                        pathGroups: [
+                            {
+                                pattern: '@/**',
+                                group: 'external',
+                                position: 'after'
+                            }
+                        ],
+                        groups: [
+                            'builtin',
+                            'external',
+                            'internal',
+                            'parent',
+                            'sibling'
+                        ]
+                    }
+                ]
+            }
         }
     ]
 };

package/.github/actions/lint-css/action.yaml

@@ -9,5 +9,5 @@ inputs:
 runs:
   using: "composite"
   steps:
-    - run: npx stylelint -f github --config .stylelintrc ${{ inputs.files }}
-      shell: sh
+  - run: npx stylelint -f github --config .stylelintrc ${{ inputs.files }}
+    shell: sh

package/.github/actions/lint-js/action.yaml

@@ -12,11 +12,11 @@ inputs:
 runs:
   using: "composite"
   steps:
-    - run: npx eslint --config .eslintrc.js --output-file ./eslint_report.json --format json ${{ inputs.files }}
-      shell: sh
+  - run: npx eslint --config .eslintrc.js --output-file ./eslint_report.json --format json ${{ inputs.files }}
+    shell: sh
 
-    - uses: ataylorme/eslint-annotate-action@1.2.0
-      if: ${{ always() }}
-      with:
-        repo-token: ${{ inputs.github-token }}
-        report-json: ./eslint_report.json
+  - uses: ataylorme/eslint-annotate-action@1.2.0
+    if: ${{ always() }}
+    with:
+      repo-token: ${{ inputs.github-token }}
+      report-json: ./eslint_report.json

package/.github/actions/setup/action.yaml

@@ -4,16 +4,10 @@ description: Setup Environment
 runs:
   using: "composite"
   steps:
-    - uses: actions/setup-node@v2
-      with:
-        node-version: 18.12.1
+  - uses: actions/setup-node@v4
+    with:
+      node-version: 20.10.0
+      cache: 'npm'
 
-    - id: npm-cache
-      uses: actions/cache@v3
-      with:
-        path: node_modules
-        key: node-modules-${{ hashFiles('**/package-lock.json') }}
-
-    - if: steps.npm-cache.outputs.cache-hit != 'true'
-      run: npm install
-      shell: sh
+  - run: npm ci
+    shell: sh

package/.github/actions/unit-tests/action.yaml

@@ -9,5 +9,5 @@ inputs:
 runs:
   using: "composite"
   steps:
-    - run: npx jest --ci --config ./.github/actions/unit-tests/jest.config.js .
-      shell: sh
+  - run: npx jest --ci --config ./.github/actions/unit-tests/jest.config.js .
+    shell: sh

package/.github/dependabot.yaml

@@ -4,15 +4,15 @@ version: 2
 # https://github.com/dependabot/dependabot-core/issues/2127
 
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "weekly"
-      day: "monday"
-      timezone: "Europe/Kiev"
-      time: "09:00"
-    versioning-strategy: "increase"
-    pull-request-branch-name:
-      separator: "_"
-    labels:
-      - "Dependencies"
+- package-ecosystem: "npm"
+  directory: "/"
+  schedule:
+    interval: "weekly"
+    day: "monday"
+    timezone: "Europe/Kiev"
+    time: "09:00"
+  versioning-strategy: "increase"
+  pull-request-branch-name:
+    separator: "_"
+  labels:
+  - "Dependencies"

package/.github/workflows/frontend-ci.yaml

@@ -3,10 +3,10 @@ name: Front-end CI
 on:
   pull_request:
     types:
-      - opened
-      - reopened
-      - synchronize
-      - ready_for_review
+    - opened
+    - reopened
+    - synchronize
+    - ready_for_review
 
 concurrency:
   group: ${{ github.ref }}
@@ -18,26 +18,27 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.pull_request.draft == false
     steps:
-      - uses: dorny/paths-filter@v2
-        id: changes_filter
-        with:
-          list-files: 'shell'
-          filters: |
-            lint:
-              - added|modified: 'lib/**/*.js'
-              - added|modified: 'lib/**/*.vue'
+    - id: changes_filter
+      uses: dorny/paths-filter@v2
+      with:
+        list-files: 'shell'
+        filters: |
+          lint:
+            - added|modified: 'lib/**/*.js'
+            - added|modified: 'lib/**/*.ts'
+            - added|modified: 'lib/**/*.vue'
 
-      - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
-        uses: actions/checkout@v3
+    - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
+      uses: actions/checkout@v4
 
-      - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
-        uses: ./.github/actions/setup
+    - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
+      uses: ./.github/actions/setup
 
-      - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
-        uses: ./.github/actions/lint-js
-        with:
-          files: ${{ steps.changes_filter.outputs.lint_files }}
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+    - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
+      uses: ./.github/actions/lint-js
+      with:
+        files: ${{ steps.changes_filter.outputs.lint_files }}
+        github-token: ${{ secrets.GITHUB_TOKEN }}
 
 
   lint_css:
@@ -45,25 +46,25 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.pull_request.draft == false
     steps:
-      - uses: dorny/paths-filter@v2
-        id: changes_filter
-        with:
-          list-files: 'shell'
-          filters: |
-            lint:
-              - added|modified: 'lib/**/*.css'
-              - added|modified: 'lib/**/*.vue'
+    - id: changes_filter
+      uses: dorny/paths-filter@v2
+      with:
+        list-files: 'shell'
+        filters: |
+          lint:
+            - added|modified: 'lib/**/*.css'
+            - added|modified: 'lib/**/*.vue'
 
-      - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
-        uses: actions/checkout@v3
+    - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
+      uses: actions/checkout@v4
 
-      - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
-        uses: ./.github/actions/setup
+    - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
+      uses: ./.github/actions/setup
 
-      - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
-        uses: ./.github/actions/lint-css
-        with:
-          files: ${{ steps.changes_filter.outputs.lint_files }}
+    - if: ${{ steps.changes_filter.outputs.lint == 'true' }}
+      uses: ./.github/actions/lint-css
+      with:
+        files: ${{ steps.changes_filter.outputs.lint_files }}
 
 
   unit_tests:
@@ -71,22 +72,23 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.pull_request.draft == false
     steps:
-      - uses: dorny/paths-filter@v2
-        id: changes_filter
-        with:
-          list-files: 'shell'
-          filters: |
-            tests:
-              - 'lib/**/*.js'
-              - 'lib/**/*.vue'
-
-      - if: ${{ steps.changes_filter.outputs.tests == 'true' }}
-        uses: actions/checkout@v3
-
-      - if: ${{ steps.changes_filter.outputs.tests == 'true' }}
-        uses: ./.github/actions/setup
-
-      - if: ${{ steps.changes_filter.outputs.tests == 'true' }}
-        uses: ./.github/actions/unit-tests
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+    - id: changes_filter
+      uses: dorny/paths-filter@v2
+      with:
+        list-files: 'shell'
+        filters: |
+          tests:
+            - 'lib/**/*.js'
+            - 'lib/**/*.ts'
+            - 'lib/**/*.vue'
+
+    - if: ${{ steps.changes_filter.outputs.tests == 'true' }}
+      uses: actions/checkout@v4
+
+    - if: ${{ steps.changes_filter.outputs.tests == 'true' }}
+      uses: ./.github/actions/setup
+
+    - if: ${{ steps.changes_filter.outputs.tests == 'true' }}
+      uses: ./.github/actions/unit-tests
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}

package/config/build/cli.config.js

@@ -1,40 +1,43 @@
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import esbuild from 'rollup-plugin-esbuild';
 import terser from '@rollup/plugin-terser';
 import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 import json from '@rollup/plugin-json';
-import { resolvePath, isDevelopment } from './settings';
+import alias from '@rollup/plugin-alias';
+import { resolvePath, isDevelopment, aliases } from './settings';
 
 const productionPlugins = isDevelopment ? [] : [
     terser({ toplevel: true })
 ];
 
 export default {
-    input: resolvePath('./lib/entryCli.js'),
+    input: resolvePath('./lib/entryCli.ts'),
 
     output: {
         file: resolvePath('./dist/cli.js'),
         format: 'cjs',
         plugins: [
-            getBabelOutputPlugin({
-                presets: [
-                    ['@babel/preset-env', { targets: { node: 18 } }]
-                ]
-            }),
             ...productionPlugins
         ]
     },
 
     plugins: [
+        esbuild.default({
+            target: 'node20'
+        }),
         replace({
             preventAssignment: true,
             values: { 'import.meta.glob': '(() => ({}))' }
         }),
-        nodeResolve({
-            extensions: ['*', '.js', '.json'],
-            preferBuiltins: true
+        alias({
+            entries: aliases,
+            customResolver: resolve({
+                extensions: ['*', '.js', '.ts', '.json'],
+                preferBuiltins: true
+            })
         }),
+        resolve(),
         commonjs({ ignore: ['canvas'] }),
         json()
     ],

package/config/build/{example.config.mjs → example.config.ts}

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import { resolvePath } from './settings';
+import { aliases, resolvePath } from './settings';
 
 export default defineConfig({
     root: resolvePath('./example'),
@@ -14,19 +14,12 @@ export default defineConfig({
     clearScreen: false,
 
     resolve: {
-        extensions: ['*', '.js', '.vue', '.json']
+        extensions: ['*', '.ts', '.js', '.vue', '.json'],
+        alias: aliases
     },
 
     plugins: [
-        vue({
-            template: {
-                compilerOptions: {
-                    compatConfig: {
-                        MODE: 2
-                    }
-                }
-            }
-        })
+        vue()
     ],
 
     define: {

package/config/build/{lib.config.mjs → lib.config.ts}

@@ -1,22 +1,24 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin';
-import { resolvePath } from './settings';
+import type { PreRenderedAsset } from 'rollup';
+import { aliases, resolvePath } from './settings';
 
 export default defineConfig({
     build: {
         minify: false,
+        emptyOutDir: false,
 
         lib: {
-            entry: resolvePath('./lib/entryLib.js'),
+            entry: resolvePath('./lib/entryLib.ts'),
             fileName: 'wysiwyg',
             formats: ['es']
         },
 
         rollupOptions: {
             output: {
-                assetFileNames: (asset) => {
-                    return asset.name === 'style.css' ? 'wysiwyg.css' : asset.name;
+                assetFileNames: (asset: PreRenderedAsset): string => {
+                    return asset.name === 'style.css' ? 'wysiwyg.css' : asset.name!;
                 }
             },
             external: ['vue', '@zipify/colorpicker']
@@ -24,19 +26,12 @@ export default defineConfig({
     },
 
     resolve: {
-        extensions: ['*', '.js', '.vue', '.json']
+        extensions: ['*', '.ts', '.js', '.vue', '.json'],
+        alias: aliases
     },
 
     plugins: [
-        vue({
-            template: {
-                compilerOptions: {
-                    compatConfig: {
-                        MODE: 2
-                    }
-                }
-            }
-        }),
+        vue(),
         optimizeLodashImports()
     ]
 });

package/config/build/settings.js

@@ -1,5 +1,11 @@
-import path from 'path';
+import { resolve } from 'path';
+import tsconfig from '../../tsconfig.json';
 
-export const root = path.resolve(__dirname, '../..');
-export const resolvePath = (...parts) => path.resolve(root, ...parts);
+export const root = resolve(__dirname, '../..');
+export const resolvePath = (...parts) => resolve(root, ...parts);
 export const isDevelopment = process.env.NODE_ENV === 'development';
+
+export const aliases = Object.entries(tsconfig.compilerOptions.paths).map(([name, [path]]) => ({
+    find: name.replace('/*', ''),
+    replacement: resolvePath(path.replace('/*', ''))
+}));