WIP vue 3 update

.eslintrc.js

@@ -35,7 +35,7 @@ module.exports = {
           ['compositionsdir', resolve('src/compositions')],
           ['mixinsdir', resolve('src/mixins')],
         ],
-        extensions: ['.vue', '.json', '.js', '.jsx']
+        extensions: ['.vue', '.json', '.js']
       },
     },
   },
@@ -44,8 +44,8 @@ module.exports = {
     // don't require .vue extension when importing
     'import/extensions': ['error', 'always', {
       js: 'never',
-      jsx: 'never',
-      vue: 'never'
+      vue: 'never',
+      ts: 'never',
     }],
     // allow optionalDependencies
     'import/no-extraneous-dependencies': ['error', {
@@ -55,6 +55,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'vue/require-default-prop': 0,
     'vue/attributes-order': 0,
+    'vue/no-multiple-template-root': 0,
     'max-len': ['error', {
       'code': 100,
       'ignoreComments': true,

.gitignore

@@ -51,3 +51,4 @@ public/*.js
 public/*.map
 public/*.css
 src/**/package-lock\.json
+unmigrated/

VUE-3.md

@@ -0,0 +1,32 @@
+[] accordion
+[] alert
+[] breadcrumb
+[] button
+[] caption
+[] card
+[] checkbox
+[] formGroup
+[] grid
+[] icon
+[] image
+[] input
+[] link
+[] list
+[] modal
+[] pagination
+[] popover
+[] quote
+[] radio
+[] rating
+[] select
+[] table
+[] tabs
+[] text
+[] tooltip
+
+
+
+NICE TO HAVE TODOS:
+
+buildclass refactor. one function that can build any cedar class. make classes consistent. define types.
+make clsx available in every template

babel.config.js

@@ -1,7 +1,6 @@
 /* eslint-disable */
 
 module.exports = function (api) {
-
   const env = process.env.NODE_ENV;
   const babelEnv = process.env.BABEL_ENV;
 
@@ -36,7 +35,6 @@ module.exports = function (api) {
       "@babel/preset-env",
       presetEnvConfig,
     ],
-    "@vue/babel-preset-jsx"
   ];
 
   const plugins = [
@@ -46,7 +44,7 @@ module.exports = function (api) {
         "corejs": 3,
         "useESModules": babelEnv === 'esm',
       }
-    ]
+    ],
   ];
 
   return {

build/extract-css.js

@@ -11,7 +11,6 @@ const packageJson = require('../package.json')
 
 const env = process.env.NODE_ENV;
 
-
 buildCss({
   srcPath: './src/css/reset.scss',
   outPath: './dist/style/reset.css',
@@ -61,7 +60,7 @@ function buildCss({ srcPath, outPath, scopeClasses }) {
           plugins.push(postcssModules({
             generateScopedName: function (name) {
               // scope classes for components
-              return `${name}_${packageJson.version}`;
+              return `${name}_${packageJson.version.replace(/\./g, '-')}`;
             },
             getJSON: function noop() {}
             // Passing a noop as getJSON makes it so postcss-modules does not output a JSON

build/rollup-plugins.js

@@ -8,6 +8,7 @@ import copyPlugin from 'rollup-plugin-copy';
 import vue from 'rollup-plugin-vue';
 import babel from 'rollup-plugin-babel';
 import postcssImport from 'postcss-import';
+// import postcssModules from 'postcss-modules';
 import packageJson from '../package.json';
 
 const env = process.env.NODE_ENV;
@@ -20,11 +21,11 @@ function generateScopedName(name, filename, css) {
   // don't scope anything in the `css/main.scss` (reset, utils, type, etc.)
   if (filename.match(/main\.scss/) || env === 'test') return name;
   // scope classes for components
-  return `${name}_${packageJson.version}`;
+  return `${name}_${packageJson.version.replace(/\./g, '-')}`;
 }
 
 // plugin configs
-let postcssExtract = false;
+let postcssExtract = 'dist/cedar-compiled.css';
 let copyOutput = 'public';
 const copyTargets = [
   { src: 'static/star-null.svg', dest: 'dist/svg' },
@@ -38,7 +39,6 @@ const copyTargets = [
 
 // prod only options
 if (env === 'prod') {
-  postcssExtract = 'dist/cedar-compiled.css';
   copyOutput = 'dist';
 }
 
@@ -48,10 +48,26 @@ if (env !== 'test') {
     {
       src: 'static/cdr-fonts.css',
       dest: `${copyOutput}`,
+    },
+
+  );
+}
+
+if (env === 'dev') {
+  copyTargets.push(
+    {
+      src: 'dist/cedar-compiled.css',
+      dest: 'public/',
+    },
+    {
+      src: 'dist/style/reset.css',
+      dest: 'public/',
     }
   );
 }
 
+
+
 const plugins = [
   (env == 'test' || env == 'dev') && alias({
     entries: {
@@ -62,31 +78,36 @@ const plugins = [
       mixinsdir: resolve('src/mixins'),
     },
     customResolver: nodeResolve({
-      extensions: ['.json', '.js', '.jsx', '.scss', '.vue'],
+      extensions: ['.json', '.js', , '.scss', '.vue'],
     }),
   }),
   nodeResolve({
     mainFields: ['module', 'jsnext:main', 'main'],
-    extensions: ['.mjs', '.js', '.jsx', '.json'],
+    extensions: ['.mjs', '.js', '.vue', '.json'],
   }),
-  env !== 'prod' && vue({
-    style: {
-      postcssModulesOptions: {
-        generateScopedName,
-      },
-    },
-    data: {
-      // this gets prepended in all components <style>
-      scss() {
-        return `$cdr-warn: false;
-        @import "${resolve('node_modules/@rei/cdr-tokens/dist/scss/cdr-tokens.scss')}";
-        @import "${resolve('src/css/settings/_index.scss')}";`;
-      },
+  vue({
+    // style: {
+    //   postcssModulesOptions: {
+    //     generateScopedName,
+    //   },
+    // },
+    // data: {
+    //   // this gets prepended in all components <style>
+    //   scss() {
+    //     return `$cdr-warn: false;
+    //     @import "${resolve('node_modules/@rei/cdr-tokens/dist/scss/cdr-tokens.scss')}";
+    //     @import "${resolve('src/css/settings/_index.scss')}";`;
+    //   },
+    // },
+    // https://github.com/vuejs/rollup-plugin-vue/blob/cd652cd92e7d21bda00f32e47530a8946963a1cc/docs/migrating.md
+    // css: false, // TODO: THIS WILL auto inject styles!!!!! might make dev simpler!!!!
+    preprocessStyles: true,
+    cssModulesOptions: {
+      generateScopedName,
     },
     template: {
       isProduction: env === 'prod',
     },
-    styleInjector: `~${resolve('build/style-injector.mjs')}`,
   }),
   postcss({
     config: true,
@@ -109,7 +130,7 @@ const plugins = [
     runtimeHelpers: true, // ????
   }),
   commonjs({
-      extensions: ['.js', '.jsx']
+      extensions: ['.js', '.vue']
   }),
   copyPlugin({
     targets: copyTargets,

jest.config.js

@@ -1,23 +1,23 @@
 const config = {
   verbose: true,
-  collectCoverage: true,
-  collectCoverageFrom: [
-    'src/components/**/*.{js,jsx}',
-    'src/mixins/**/*.{js,jsx}',
-    'src/utils/**/*.{js,jsx}',
-    '!src/components/**/examples/**/*.{js,jsx}', // not component examples
-    '!src/components/icon/{comps,build}/**/*.{js,jsx}', // not icon components
-    '!**/*.backstop.js', // not backstop files
-    '!**/node_modules/**', // not node_modules
-  ],
-  coverageDirectory: 'coverage',
+  collectCoverage: false,
+  // collectCoverageFrom: [
+  //   'src/components/**/*.{js,vue}',
+  //   'src/mixins/**/*.{js}',
+  //   'src/utils/**/*.{js}',
+  //   '!src/components/**/examples/**/*.{js,vue}', // not component examples
+  //   '!src/components/icon/{comps,build}/**/*.{js,vue}', // not icon components
+  //   '!**/*.backstop.js', // not backstop files
+  //   '!**/node_modules/**', // not node_modules
+  // ],
+  // coverageDirectory: 'coverage',
   moduleFileExtensions: [
     'js',
     'json',
-    'jsx',
+    'vue',
+    'ts'
   ],
   moduleNameMapper: {
-    'distdir(.*)$': '<rootDir>/dist/$1',
     'componentdir(.*)$': '<rootDir>/src/components/$1',
   },
   modulePathIgnorePatterns: [
@@ -26,12 +26,20 @@ const config = {
     '<rootDir>/templates/__tests__',
   ],
   transform: {
-    '^.+\\.(js|jsx)?$': 'babel-jest',
-    '.+\\.(css|styl|less|sass|scss)$': '<rootDir>/node_modules/jest-css-modules-transform',
+  '.+\\.(css|styl|less|sass|scss)$': '<rootDir>/node_modules/jest-css-modules-transform',
+    ".*\\.(vue|ts)$": "vue-jest",
+    '^.+\\.(js|vue)?$': 'babel-jest',
   },
   transformIgnorePatterns: [
     '<rootDir>/node_modules/(?!(lodash-es|@rei\/cdr-tokens)/.*)', // https://stackoverflow.com/questions/42260218/jest-setup-syntaxerror-unexpected-token-export
   ],
+  "globals": {
+    "vue-jest": {
+      "babelConfig": {
+          "configFile": "./babel.config.js"
+        },
+    }
+  }
 };
 
 module.exports = config;