Add combined assets (#68)

<!-- THE PR TEMPLATE IS NOT AN OPTION. DO NOT DELETE IT, MAKE SURE YOU READ AND EDIT IT! -->

<!--
    Specify which issues will be fixed/closed.
    Remove it if this is not related.
-->


## Subject

Add combined assets

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true,
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/warnings",
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "import",
+  ],
+  "settings": {
+  },
+  "rules": {}
+};

.github/settings.yml

@@ -14,6 +14,7 @@ branches:
       enforce_admins: false
       required_status_checks:
         contexts:
+          - "Webpack build"
           - "Coding Standards (7.4)"
           - "Static Code Analysis (7.4)"
           - "Tests (7.3, lowest, ~4.2)"

.github/workflows/continuous-integration.yml

@@ -11,6 +11,29 @@ on:
 name: "Continuous Integration"
 
 jobs:
+  webpack:
+    name: "Webpack build"
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: "Checkout"
+        uses: actions/[email protected]
+
+      - name: "Using Node"
+        uses: actions/[email protected]
+
+      - name: "Install dependencies"
+        run: |
+          yarn
+
+      - name: "Build"
+        run: yarn build
+
+      - name: "Check size"
+        run: |
+          yarn size
+
   coding-standards:
     name: "Coding Standards"
 

.gitignore

@@ -4,6 +4,7 @@ coverage
 composer.lock
 phpunit.xml
 /build
+/node_modules
 /vendor
 /vendor-bin
 !/vendor-bin/*/composer.json

assets/js/Autocomplete.js

@@ -1,4 +1,4 @@
-import 'awesomplete';
+import Awesomplete from 'awesomplete';
 import 'awesomplete/awesomplete.css'
 
 export default class Autocomplete {

assets/npm.js → assets/widget.js

@@ -1,3 +1,3 @@
 import Autocomplete from './js/Autocomplete';
 
-export default Autocomplete
+export {Autocomplete};

package.json

@@ -6,8 +6,39 @@
     "dependencies": {
         "awesomplete": "^1.1"
     },
-    "main": "assets/npm.js",
+    "devDependencies": {
+        "@babel/core": "^7.10.3",
+        "@babel/preset-env": "^7.10.3",
+        "@size-limit/preset-small-lib": "^4.1.1",
+        "@size-limit/webpack": "^4.1.1",
+        "@symfony/webpack-encore": "^0.30.2",
+        "babel-eslint": "^10.1.0",
+        "babel-loader": "^8.1.0",
+        "eslint": "^6.8.0",
+        "eslint-config-airbnb": "^18.1.0",
+        "eslint-plugin-import": "^2.20.2",
+        "eslint-loader": "^4.0.2",
+        "eslint-watch": "^6.0.1",
+        "node-sass": "^4.12.0",
+        "sass-loader": "^8.0.2",
+        "size-limit": "^4.1.1"
+    },
+    "main": "assets/widget.js",
     "files": [
-        "assets/"
+        "src/Resources/public/"
+    ],
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "size": "size-limit",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
+    },
+    "size-limit": [
+        {
+            "path": "src/Bridge/Symfony/Resources/public/widget.js",
+            "gzip": false,
+            "limit": "11 KB"
+        }
     ]
 }

src/Bridge/Symfony/Resources/public/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "widget": {
+      "css": [
+        "/bundles/nucleosform/widget.css"
+      ],
+      "js": [
+        "/bundles/nucleosform/widget.js"
+      ]
+    }
+  }
+}

src/Bridge/Symfony/Resources/public/manifest.json

@@ -0,0 +1,4 @@
+{
+  "widget.css": "/bundles/nucleosform/widget.css",
+  "widget.js": "/bundles/nucleosform/widget.js"
+}

webpack.config.js

@@ -0,0 +1,14 @@
+const Encore = require('@symfony/webpack-encore');
+
+Encore
+  .setOutputPath('src/Bridge/Symfony/Resources/public')
+  .setPublicPath('/bundles/nucleosform')
+  .setManifestKeyPrefix('')
+  .cleanupOutputBeforeBuild()
+  .disableSingleRuntimeChunk()
+  .enableSourceMaps(!Encore.isProduction())
+  .enableEslintLoader()
+  .addEntry('widget', './assets/widget.js')
+;
+
+module.exports = Encore.getWebpackConfig();