Merge pull request #1 from Alviner/feature/esm

feat: esm init

README.md

@@ -6,4 +6,4 @@ Cookiecutter for aiohttp with ws and vue as front part
 
 1. Python ~3.11
 1. Cookiecutter ~2.0
-1. Java RT to use closure compiler
+1. Yarn to build vendor

cookiecutter.json

@@ -7,7 +7,6 @@
   "project_description": "Vue Admin Panel",
   "_copy_without_render": [
     "*.vue",
-    "*.css",
-    "*.js"
+    "*.css"
   ]
 }

hooks/post_gen_project.py

@@ -6,6 +6,6 @@
 subprocess.check_call(['git', 'tag', '--annotate', '-m', 'v0.0', 'v0.0'])
 subprocess.check_call(['poetry', 'env', 'use', '3.11'])
 subprocess.check_call(['make', 'develop'])
-subprocess.check_call(['make', 'vendor'])
+subprocess.check_call(['make', 'build-vendor'])
 subprocess.check_call(['make', 'format'])
 

{{cookiecutter.project_slug}}/.eslintignore

@@ -0,0 +1,6 @@
+/**/vendor.*
+/**/es-module-shims.*
+env/
+!vendor.js
+buildVendor.js
+

{{cookiecutter.project_slug}}/.eslintrc.cjs

@@ -0,0 +1,23 @@
+/* eslint-env node */
+module.exports = {
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended'
+  ],
+  overrides: [
+    {
+      files: ['*.js', '*.vue'],
+    },
+  ],
+  rules: {
+    'vue/multi-word-component-names': ['error', { ignores: ['Home'] }],
+    'vue/html-self-closing': ['error', {
+      'html': {
+        'void': 'never',
+        'normal': 'never',
+        'component': 'never',
+      }
+
+    }]
+  }
+};

{{cookiecutter.project_slug}}/Makefile

@@ -40,6 +40,7 @@ lint:
 format:
 	poetry run gray $(PROJECT_PATH) tests
 	poetry run ruff $(PROJECT_PATH) tests --fix
+	yarn lint-fix
 
 purge: clean
 	rm -rf ./.venv
@@ -60,6 +61,7 @@ upload: build
 develop: clean
 	poetry -V
 	poetry install
+	yarn install
 
-vendor:
-	poetry run $(PROJECT_PATH)_vendor 
+build-vendor:
+	yarn build

{{cookiecutter.project_slug}}/buildVendor.js

@@ -0,0 +1,60 @@
+const gzipPlugin = require('@luncheon/esbuild-plugin-gzip');
+const esbuild = require('esbuild');
+
+const modulePath = process.env.NODE_PATH || 'node_modules';
+const nodePaths = [modulePath];
+
+process.env.NODE_ENV = 'production';
+
+const target = [
+  'es2020', 'chrome58', 'firefox57', 'safari11',
+];
+const outdir = './{{cookiecutter.project_slug}}/admin/static/vendor';
+
+esbuild
+  .build({
+    entryPoints: [
+      './vendor/vendor.js',
+    ],
+    bundle: true,
+    minify: true,
+    sourcemap: true,
+    plugins: [gzipPlugin({
+      uncompressed: false,
+      gzip: true,
+      brotli: false,
+    })],
+    loader: {
+      '.png': 'base64',
+      '.svg': 'base64',
+      '.woff': 'dataurl',
+      '.woff2': 'dataurl',
+      '.eot': 'dataurl',
+      '.ttf': 'dataurl',
+    },
+    format: 'esm',
+    write: false,
+    outdir,
+    target,
+    nodePaths,
+  });
+
+esbuild
+  .build({
+    entryPoints: [
+      'es-module-shims',
+    ],
+    bundle: true,
+    minify: true,
+    sourcemap: true,
+    format: 'iife',
+    plugins: [gzipPlugin({
+      uncompressed: false,
+      gzip: true,
+      brotli: false,
+    })],
+    outdir,
+    write: false,
+    target,
+    nodePaths,
+  });

{{cookiecutter.project_slug}}/package.json

@@ -0,0 +1,33 @@
+{
+  "license": "unlicence",
+  "private": true,
+  "scripts": {
+    "build": "node buildVendor.js",
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.0.10",
+    "@wsrpc/client": "4.4.1",
+    "element-plus": "^2.2.32",
+    "es-module-shims": "1.7.0",
+    "esbuild": "0.17.10",
+    "vue": "3.2.47",
+    "vue-router": "4.1.6"
+  },
+  "devDependencies": {
+    "@luncheon/esbuild-plugin-gzip": "^0.1.0",
+    "eslint": "^8.34.0",
+    "eslint-plugin-vue": "^9.9.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "not IE 11",
+    "not op_mini all",
+    "not samsung 12",
+    "not and_uc 12",
+    "not ios_saf 12.2",
+    "not ios_saf 13.4"
+  ],
+  "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+}

{{cookiecutter.project_slug}}/tests/admin/middlewares/test_vue_router.py

@@ -15,7 +15,7 @@ async def test_static_file(api_client):
     async with api_client.get('/static/main.js') as resp:
         assert resp.status == HTTPStatus.OK
         body = await resp.text()
-        assert 'new Vue' in body
+        assert 'createApp' in body
 
 
 async def test_not_found_static_file(api_client):

{{cookiecutter.project_slug}}/vendor/vendor.js

@@ -0,0 +1,37 @@
+
+import 'element-plus/dist/index.css';
+import WSRPC from '@wsrpc/client';
+
+import {
+  createApp,
+} from 'vue/dist/vue.esm-bundler.js';
+
+import {
+  createRouter,
+  createWebHistory,
+  RouterLink,
+} from 'vue-router/dist/vue-router.esm-bundler.js';
+
+import elementPlusLocale from 'element-plus/es/locale/lang/ru.mjs';
+import elementPlus, {
+  ElLoading as Loading,
+  ElMessage as Message,
+  ElNotification as Notification,
+} from 'element-plus';
+
+
+export {
+  WSRPC,
+
+  createApp,
+
+  createWebHistory,
+  createRouter,
+  RouterLink,
+
+  elementPlus,
+  elementPlusLocale,
+  Loading,
+  Message,
+  Notification,
+};

{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/admin/static/App.js

@@ -0,0 +1,4 @@
+export default {
+  template: '<router-view/>',
+};
+