Shakapack

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 Features
   - Update power api gem to use v2.0.0. Install "internal" API mode [#394](https://github.com/platanus/potassium/pull/394)
+  - Updates Webpacker to Shakapacker, upgrading Vue and TailwindCSS to their latest versions [#395](https://github.com/platanus/potassium/pull/395)
 ## 6.5.0
 
 Features

lib/potassium/assets/.eslintrc.json

@@ -1,12 +1,16 @@
 {
   "env": {
-    "es6": true
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "jest/globals": true,
+    "vue/setup-compiler-macros": true
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": ["import"],
+  "plugins": ["import", "jest", "tailwindcss"],
   "settings": {
     "import/resolver": {
       "node": {
@@ -15,7 +19,10 @@
     }
   },
   "extends": [
-    "plugin:vue/strongly-recommended"
+    "plugin:vue/vue3-recommended",
+    "@vue/typescript/recommended",
+    "@vue/eslint-config-typescript",
+    "plugin:tailwindcss/recommended"
   ],
   "rules": {
     "accessor-pairs": 0,
@@ -338,14 +345,13 @@
     "vue/max-len": ["error", {
       "code": 120,
       "ignoreHTMLAttributeValues": true
-  }]
+    }]
   },
   "overrides": [
     {
-      "files": ["**/*.js"],
-      "excludedFiles": "app/**/*.js",
-      "env": {
-        "node": true
+      "files": ["*.ts", "*.vue"],
+      "rules": {
+        "no-undef": "off"
       }
     }
   ]

lib/potassium/assets/README.yml

@@ -27,7 +27,7 @@ readme:
       body: |
         For hot-reloading and fast webpacker compilation you need to run webpack's dev server along with the rails server:
 
-            $ ./bin/webpack-dev-server
+            $ ./bin/webpacker-dev-server
 
         Running the dev server will also solve problems with the cache not refreshing between changes and provide better error messages if something fails to compile.
 
@@ -136,7 +136,7 @@ readme:
             This project uses [Active Admin](https://github.com/activeadmin/activeadmin) which is a Ruby on Rails framework for creating elegant backends for website administration.
             <% if get(:vue_admin) %>
             This project supports Vue inside ActiveAdmin
-            - The main package is located in `app/javascript/packs/admin_application.js`, here you will declare the components you want to include in your ActiveAdmin views as you would in a normal Vue App.
+            - The main package is located in `app/javascript/active_admin.js`, here you will declare the components you want to include in your ActiveAdmin views as you would in a normal Vue App.
             - Additionally, to be able to use Vue components as [Arbre](https://github.com/activeadmin/arbre) Nodes the component names are also declared in `config/initializers/active_admin.rb`
             - The generator includes an example component called `admin_component`, you can use this component inside any ActiveAdmin view by just writing `admin_component` as you would with any `html` tag.
               - For example:

lib/potassium/assets/active_admin/admin-component.vue

@@ -1,35 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  test?: string
+  testNumber?: number
+  testObject?: {[key: string]: string},
+  testList?: number[],
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    test: undefined,
+    testNumber: 0,
+    testObject: undefined,
+    testList: undefined,
+  },
+);
+
+const message = 'Hello World';
+</script>
+
 <template>
   <div>
-    I am a Vue Component {{ test }} {{ message }}
+    I am a Vue Component {{ props.test }} {{ message }}
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    test: {
-      type: String,
-      default: '',
-    },
-    testNumber: {
-      type: Number,
-      default: 0,
-    },
-    testObject: {
-      type: Object,
-      default: null,
-    },
-    testList: {
-      type: Array,
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      message: 'Hello World',
-    };
-  },
-};
-</script>

lib/potassium/assets/app/javascript/app.spec.js → lib/potassium/assets/app/javascript/components/app.spec.ts

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import App from 'app';
+import App from './app.vue';
 
 describe('App', () => {
   test('is a Vue instance', () => {

lib/potassium/assets/app/javascript/components/app.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const message = 'Hello Vue!';
+</script>
+
+<template>
+  <div id="app">
+    <p class="text-center text-lg">{{ message }}</p>
+  </div>
+</template>

lib/potassium/assets/app/javascript/types/vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

lib/potassium/assets/config/webpack/rules/css.js

@@ -0,0 +1,5 @@
+module.exports = {
+  resolve: {
+    extensions: ['.css', '.scss']
+  }
+}

lib/potassium/assets/config/webpack/rules/index.js

@@ -0,0 +1,11 @@
+const vueConfig = require('./vue');
+const cssConfig = require('./css');
+const jQueryConfig = require('./jquery');
+const typescriptConfig = require('./typescript');
+
+module.exports = {
+  vueConfig,
+  cssConfig,
+  jQueryConfig,
+  typescriptConfig,
+};

lib/potassium/assets/config/webpack/rules/jquery.js

@@ -0,0 +1,11 @@
+const webpack = require('webpack');
+
+module.exports = {
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      "window.jQuery":"jquery"
+    })
+  ],
+}

lib/potassium/assets/config/webpack/rules/typescript.js

@@ -0,0 +1,32 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+          transpileOnly: true,
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts'],
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      typescript: {
+        extensions: {
+          vue: {
+            enabled: true,
+            compiler: '@vue/compiler-sfc',
+          },
+        },
+      },
+    }),
+  ],
+};

lib/potassium/assets/config/webpack/rules/vue.js

@@ -0,0 +1,19 @@
+const { VueLoaderPlugin } = require('vue-loader')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
+    ]
+  },
+  plugins: [new VueLoaderPlugin()],
+  resolve: {
+    extensions: ['.vue'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm-bundler.js',
+    }
+  },
+}

lib/potassium/assets/config/webpack/webpack.config.js

@@ -0,0 +1,4 @@
+const { webpackConfig, merge } = require('shakapacker');
+const { vueConfig, cssConfig, jQueryConfig, typescriptConfig } = require('./rules');
+
+module.exports = merge(typescriptConfig, cssConfig, jQueryConfig, webpackConfig);

lib/potassium/assets/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "useDefineForClassFields": true,
+    "jsx": "preserve",
+    "noImplicitThis": true,
+    "strict": true,
+    "isolatedModules": true,
+    "preserveValueImports": true,
+    "importsNotUsedAsValues": "error",
+    "target": "esnext",
+    "allowJs": true,
+
+    // Recommended
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    // See <https://github.com/vuejs/vue-cli/pull/5688>
+    "skipLibCheck": true,
+    "baseUrl": "app/javascript/",
+    "types": ["@types/jest", "@types/node"],
+  },
+  "include": [
+    "app/javascript/**/*.ts",
+    "app/javascript/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

lib/potassium/cli/commands/create.rb

@@ -22,7 +22,7 @@ module Potassium::CLI
         template = template_finder.default_template
         template.cli_options = options
         template.source_paths << Rails::Generators::AppGenerator.source_root
-        ARGV.push('--skip-webpack-install', '--skip-bundle')
+        ARGV.push('--skip-javascript', '--skip-bundle')
         template.start
       rescue VersionError => e
         print "\nError: #{e.message}" # rubocop:disable Rails/Output

lib/potassium/recipes/admin.rb

@@ -37,6 +37,7 @@ def add_active_admin
     add_readme_section :internal_dependencies, :active_admin
     after(:gem_install, wrap_in_action: :admin_install) do
       generate "active_admin:install --use_webpacker"
+      run 'bin/yarn add @activeadmin/activeadmin'
       line = "ActiveAdmin.setup do |config|"
       initializer = "config/initializers/active_admin.rb"
       gsub_file initializer, /(#{Regexp.escape(line)})/mi do |_match|
@@ -80,6 +81,16 @@ def build _arg
           import 'arctic_admin';
         HERE
       )
+
+      run "mv app/javascript/packs/active_admin.js app/javascript/active_admin.js"
+      gsub_file(
+        "app/javascript/active_admin.js",
+        'import "../stylesheets/active_admin";',
+        'import "./stylesheets/active_admin.scss";'
+      )
+
+      run 'rm -rf config/webpack/plugins'
+      run 'rm -rf app/javascript/packs/active_admin'
     end
   end
 end