wip

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuestic-ui-wrapper",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.9",
   "license": "MIT",
   "repository": "https://github.com/epicmaxco/vuestic-ui",
   "devDependencies": {
@@ -22,7 +22,8 @@
     "generate:docs": "yarn workspace @vuestic-ui/docs generate",
     "push": "yarn workspace vuestic-ui push",
     "push-production": "yarn workspace vuestic-ui push-production",
-    "generate:component": "yarn workspace @vuestic-ui/docs generate:component"
+    "generate:component": "yarn workspace @vuestic-ui/docs generate:component",
+    "run-all": "wt -d packages/ui --title vuestic-book cmd /k yarn serve; split-pane -d packages/docs --title vuestic-docs cmd /k yarn serve"
   },
   "workspaces": [
     "packages/*"

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuestic-ui/docs",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.9",
   "description": "Documentation for vuestic-ui framework",
   "main": "index.js",
   "repository": "https://github.com/epicmaxco/vuestic-ui",
@@ -39,6 +39,7 @@
     "vue-router": "^3.1.6",
     "vue-server-renderer": "^2.6.11",
     "vue-style-loader": "^4.1.2",
+    "vuestic-ui": "1.0.0-alpha.9",
     "vuetable-2": "^1.7.5"
   },
   "devDependencies": {

packages/docs/plugins/vuestic.ts

@@ -1,4 +1,7 @@
+// @ts-nocheck
 import Vue from 'vue'
-import VuesticPlugin from '../../ui/src/components/vuestic-plugin'
+import { VuesticPlugin } from 'vuestic-ui'
+
+console.log('VuesticPlugin', VuesticPlugin)
 
 Vue.use(VuesticPlugin)

packages/old-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuestic-ui/old-docs",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.9",
   "description": "Documentation for vuestic-ui framework",
   "main": "index.js",
   "repository": "https://github.com/epicmaxco/vuestic-ui",

packages/ui/.eslintrc.js

@@ -17,10 +17,13 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'comma-dangle': ['error', 'always-multiline'],
     curly: ['error', 'all'],
+    'indent':  ["error", 2, { "ignoreComments": true }],
     'prefer-arrow-callback': 'error',
     'array-bracket-spacing': ['error', 'never'],
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/ban-ts-ignore': 0,
+    '@typescript-eslint/no-unused-vars': 0,
+    '@typescript-eslint/no-var-requires': 0,
     '@typescript-eslint/camelcase': 0,
     'id-match': ['error', '^[A-Za-z0-9\-_\$]+$', { 'properties': true }], // To prevent cyrillic letters etc.
     'vue/html-closing-bracket-spacing': 1,

packages/ui/.npmignore

@@ -0,0 +1,13 @@
+/src/
+.browserslistrc
+.eslintrc.js
+.eslintignore
+.stylelintrc.js
+dist/report.html
+yarn-error.log
+babel.config.js
+jest.config.js
+postcss.config.js
+vue.config.js
+build
+

packages/ui/build/config.ts

@@ -0,0 +1,57 @@
+import type { Configuration } from 'webpack'
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const { merge } = require('webpack-merge')
+const base = require('./webpack.prod.config')
+const version = process.env.VERSION || require('../package.json').version
+const isProd = process.env.NODE_ENV === 'production'
+
+module.exports = merge(base, {
+  mode: 'production',
+  output: {
+    filename: 'vuestic-ui.min.js',
+    libraryTarget: 'umd',
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'vuestic-ui.min.css',
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ],
+  performance: {
+    hints: false,
+  },
+  optimization: {
+    minimizer: [
+      // new TerserPlugin({
+      //   cache: true,
+      //   parallel: true,
+      //   sourceMap: true,
+      // }),
+      new OptimizeCssAssetsPlugin({
+        assetNameRegExp: /\.css$/g,
+        cssProcessor: require('cssnano'),
+        cssProcessorOptions: {
+          discardComments: { removeAll: true },
+          postcssZindex: false,
+          reduceIdents: false,
+        },
+        canPrint: false,
+      }),
+
+      //       new webpack.BannerPlugin({
+//         banner: `/*!
+// * Vuestic v${version}
+// * Forged by John Leider
+// * Released under the MIT License.
+// */     `,
+//         raw: true,
+//         entryOnly: true,
+//       }),
+    ],
+  },
+} as Configuration)

packages/ui/build/webpack.base.config.ts

@@ -0,0 +1,51 @@
+import type { Configuration } from 'webpack'
+
+require('dotenv').config()
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
+
+const scssLoaders = [
+  // https://github.com/webpack-contrib/mini-css-extract-plugin#user-content-advanced-configuration-example
+  // TODO: remove style-loader: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34
+  MiniCssExtractPlugin.loader,
+  { loader: 'css-loader', options: { sourceMap: false } },
+  { loader: 'postcss-loader', options: { sourceMap: false } },
+  {
+    loader: 'sass-loader',
+    options: {
+      implementation: require('sass'),
+      sassOptions: {
+        indentedSyntax: false,
+      },
+    },
+  },
+]
+
+const plugins: Configuration['plugins'] = [
+  new FriendlyErrorsWebpackPlugin({
+    clearConsole: true,
+  }),
+]
+
+module.exports = {
+  resolve: {
+    extensions: ['*', '.js', '.json', '.vue', '.ts'],
+  },
+  // node: {
+  //   fs: false
+  // },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: scssLoaders,
+      },
+    ],
+  },
+  plugins,
+  performance: {
+    hints: false,
+  },
+  stats: { children: false },
+} as Configuration

packages/ui/build/webpack.prod.config.ts

@@ -0,0 +1,105 @@
+import { Configuration } from 'webpack'
+
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+
+const { merge } = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.config')
+
+const resolve = (file: string) => require('path').resolve(__dirname, file)
+
+module.exports = merge(baseWebpackConfig, {
+  entry: {
+    app: './src/main.ts',
+  },
+  output: {
+    path: resolve('../dist'),
+    publicPath: '/dist/',
+    library: 'VuesticUI',
+    libraryTarget: 'umd',
+    libraryExport: 'default',
+    // See https://github.com/webpack/webpack/issues/6522
+    globalObject: 'typeof self !== \'undefined\' ? self : this',
+  },
+  externals: {
+    vue: {
+      commonjs: 'vue',
+      commonjs2: 'vue',
+      amd: 'vue',
+      root: 'Vue',
+    },
+  },
+  module: {
+    rules: [
+      { test: /\.m?js/, resolve: { fullySpecified: false } },
+      {
+        test: /\.js?$/,
+        exclude: file => (
+          /node_modules/.test(file) &&
+          !/\.vue\.js/.test(file)
+        ),
+        loader: 'babel-loader',
+        // use: {
+        //   loader: 'babel-loader',
+        //   options: {
+        //     presets: [
+        //       ['@babel/preset-env', { targets: 'defaults' }]
+        //     ]
+        //   }
+        // }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+        ],
+      },
+      // {
+      //   test: /\.scss$/,
+      //   use: [
+      //     'vue-style-loader',
+      //     'css-loader',
+      //     'sass-loader',
+      //   ],
+      // },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            scss: 'vue-style-loader!css-loader!sass-loader',
+          },
+          // other vue-loader options go here
+        },
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        },
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]',
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js', '.vue', '.json'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+    },
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    // new BundleAnalyzerPlugin({
+    //   analyzerMode: 'static'
+    // }),
+  ],
+} as Configuration)