Merge pull request #12 from jvmn/feature/2.4.0-rc

Feature/2.4.0 rc

babel.config.js

@@ -1,17 +1,27 @@
-module.exports = function (api) {
-  api.cache(true)
+const getProjectConfig = () => `${process.env.PROJECT_CWD}/project.config.js`
+const config = require(getProjectConfig())
+const useTs = config.taskrunner.ts
+
+const presets = useTs
+  ? [
+    "@babel/preset-typescript",
+    ["@babel/preset-env", { useBuiltIns: "entry", corejs: "3.0" }],
+  ]
+  : ["@babel/env"]
 
-  const presets = [
-    ["@babel/env", {
-      // modules: false,
-      // for uglifyjs...
-      forceAllTransforms: process.env === "production"
-    }],
+const plugins = useTs
+  ? [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/transform-runtime",
   ]
-  const plugins = []
+  : ["@babel/plugin-syntax-dynamic-import"]
+
+module.exports = function (api) {
+  api.cache(true)
 
   return {
     presets,
-    plugins
+    plugins,
   }
-}
+}

lib/newpattern.js

@@ -206,10 +206,11 @@ async function renderScss() {
 }
 
 async function renderJs() {
+  const usingTs = config.taskrunner.ts
   try {
-    const file = await openTemplateFile('pattern.js')
+    const file = await openTemplateFile(usingTs ? 'pattern.ts' : 'pattern.js')
     const proccessTemplate = await template(file, templateVars)
-    saveFile(proccessTemplate, 'js')
+    saveFile(proccessTemplate, usingTs ? 'ts' : 'js')
   } catch (error) {
     console.log('​catch -> error', error)
   }

lib/templates/pattern.ts

@@ -0,0 +1,35 @@
+/**
+ * init <%= filename %>
+ * @alias <%= filename %>
+ * @namespace <%= namespace %>
+ * @return {Object} <% if(js){ %>public methods and css bundle<% } %><% if (!js) { %>with css bundle<% } %>
+ */
+<% if (js) { %>
+import { FrontendModuleInstance } from "../../../../types"
+<% } %>
+<% if (scss) { %>
+<% if (cssinjs) { %>
+require('./<%= filename %>.module')
+<% } else { %>
+if (process.env.NODE_ENV === 'dev') {
+  require('./<%= filename %>.module')
+}
+<% } %>
+<% } %>
+<% if (js) { %>
+const <%= filename %> = (context: HTMLElement): FrontendModuleInstance => {
+  // private functions
+
+  // public functions
+  const mod: FrontendModuleInstance = {
+    init: function () {
+      if (context === undefined) return
+
+      context.classList.add('AP_st-init')
+      console.log('init <%= filename %>')
+    }
+  }
+  return mod
+}
+export default <%= filename %>
+<% } %>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvmn/groundzero-taskrunner-webpack",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Taskrunner for JvM/Neckar Groundzero projects",
   "keywords": [
     "taskrunner",
@@ -94,20 +94,25 @@
     "twig": "^1.13.3"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.13.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.12.11",
-    "@frctl/fractal": "^1.5.2",
-    "@frctl/handlebars": "^1.2.5",
-    "@frctl/mandelbrot": "^1.7.0",
+    "@babel/plugin-transform-runtime": "^7.12.15",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/preset-typescript": "^7.12.16",
+    "@frctl/fractal": "^1.5.4",
+    "@frctl/handlebars": "^1.2.7",
+    "@frctl/mandelbrot": "^1.8.1",
     "@jvmn/groundzero-changelog": "^2.0.0",
     "@jvmn/upload-rsync": "^0.0.9",
-    "autoprefixer": "^10.2.3",
+    "autoprefixer": "^10.2.4",
     "babel-loader": "^8.2.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-eslint": "^10.1.0",
     "browser-sync": "^2.26.14",
     "clean-webpack-plugin": "^3.0.0",
-    "cli-progress": "^3.8.2",
-    "css-loader": "^5.0.1",
+    "core-js": "^3.8.3",
+    "cli-progress": "^3.9.0",
+    "css-loader": "^5.1.0",
     "css-minimizer-webpack-plugin": "^1.2.0",
     "cssnano": "^4.1.10",
     "csso": "^4.2.0",
@@ -118,36 +123,37 @@
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-pngquant": "^9.0.1",
     "imagemin-svgo": "^8.0.0",
-    "inquirer": "^7.3.3",
+    "inquirer": "^8.0.0",
     "jest": "^26.6.3",
-    "lodash": "^4.17.20",
-    "mini-css-extract-plugin": "^1.3.4",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^1.3.9",
     "minimist": "^1.2.5",
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "path": "^0.12.7",
     "postcss": "^8.2.4",
-    "postcss-loader": "^4.2.0",
+    "postcss-loader": "^5.0.0",
     "pretty": "^2.0.0",
-    "sass": "^1.32.5",
-    "sass-loader": "^10.1.1",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "svg-sprite": "^1.5.0",
-    "webpack": "^5.18.0",
+    "typescript": "^4.1.5",
+    "webpack": "^5.21.2",
     "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.4.0",
+    "webpack-cli": "^4.5.0",
     "webpack-merge": "^5.7.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
+    "@commitlint/cli": "^12.0.0",
+    "@commitlint/config-conventional": "^12.0.0",
     "acorn": "^8.0.5",
-    "ajv": "^7.0.3",
+    "ajv": "^7.1.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.18.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3",
-    "stylelint": "^13.9.0",
+    "eslint": "^7.20.0",
+    "husky": "^5.1.1",
+    "lint-staged": "^10.5.4",
+    "stylelint": "^13.11.0",
     "stylelint-config-recommended": "^3.0.0"
   }
 }

webpack.config.js

@@ -6,6 +6,8 @@ const projectPath = require(path.resolve(process.env.PWD + '/paths.config.js'))
 const packageJson = require(path.resolve(process.env.PROJECT_CWD + '/package.json'))
 const srcPath = path.join(process.env.PROJECT_CWD, './src')
 const distPath = path.join(process.env.PROJECT_CWD, './web-ui/assets/js')
+const getProjectConfig = () => `${process.env.PROJECT_CWD}/project.config.js`
+const config = require(getProjectConfig())
 let babelConfig
 
 try {
@@ -36,17 +38,17 @@ module.exports = {
   context: srcPath,
   bail: true, // force webpack to exit on error
   entry: {
-    app: './assets/js/app.js',
+    app: config.taskrunner.ts ? './assets/js/app.ts' : './assets/js/app.js',
     global: './globals/style/style.global.scss',
-    styleguide: './styleguide/style/styleguide.global.scss'
+    styleguide: './styleguide/style/styleguide.global.scss',
   },
   output: {
     path: distPath,
     chunkFilename: 'jvm-[name].js',
     filename: 'jvm-[name].js'
   },
   resolve: {
-    extensions: ['.js', '.scss'],
+    extensions: ['.ts', '.js', '.scss'],
     alias: {
       ...aliasEntries()
     }
@@ -164,9 +166,9 @@ module.exports = {
           },
         ]
       },
-      // handle js
+      // handle js/ts
       {
-        test: /^(?!.*\.config\.js$).*\.js$/,
+        test: /^(?!.*\.config\.(ts|js)$).*\.(ts|js)$/,
         exclude: /(node_modules)/,
         /* if you decide to bundle GSAP and not use the umd verion you would need to
          * use include instead of exclude to properly babelify GSAP or it fails on older browsers.
@@ -176,11 +178,8 @@ module.exports = {
         //     /(node_modules\/gsap)/
         // ],
         use: {
-          // https://github.com/babel/babel-loader
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/env'],
-            plugins: ['@babel/plugin-syntax-dynamic-import'],
             configFile: babelConfig
           }
         }

webpack.critical.js

@@ -126,7 +126,7 @@ module.exports = {
   },
   stats: {
     // assets: false,
-    excludeAssets: (assetName) => assetName.includes('js'),
+    excludeAssets: (assetName) => assetName.includes('js') || assetName.includes('ts'),
     modules: false,
     chunks: false,
     cached: false,

webpack.cssmod.js

@@ -47,7 +47,7 @@ module.exports = {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['.js', '.scss'],
+    extensions: ['.ts', '.js', '.scss'],
     alias: {
       ...aliasEntries()
     }
@@ -241,7 +241,7 @@ module.exports = {
   },
   stats: {
     // assets: false,
-    excludeAssets: (assetName) => assetName.includes('js'),
+    excludeAssets: (assetName) => assetName.includes('js') || assetName.includes('ts'),
     modules: false,
     chunks: false,
     cached: false,