Feature/acms vite plugin

src/develop/admin.html

@@ -3,16 +3,9 @@
 @section("admin-js")
 @parent
 <!-- カスタムJSを記述 -->
-<!-- BEGIN_MODULE Vite -->
-<!-- BEGIN_IF [{useDevServer}/eq/1] -->
-<script type="module" src="{devServerUrl}/@vite/client"></script>
-<script type="module" src="{devServerUrl}/src/js/admin.js" async></script>
-<!-- ELSE -->
-<!-- BEGIN manifest -->
-<!-- BEGIN src/js/admin.js -->
-<script type="module" src="/dist/{file}" async></script>
-<!-- END src/js/admin.js -->
-<!-- END manifest -->
-<!-- END_IF -->
-<!-- END_MODULE Vite -->
+@vite("src/js/admin.js", {
+  "scriptTagAttributes": {
+    "async": true
+  }
+})
 @endsection

src/develop/eslint.config.js

@@ -1,6 +1,6 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
-import pluginTw from "eslint-plugin-tailwindcss"
+import pluginTailwind from "eslint-plugin-tailwindcss";
 
 export default [
   {
@@ -11,10 +11,8 @@ export default [
         ACMS: 'writable',
       }
     },
-    plugins: {
-      pluginTw,
-    },
     ignores: ['dist/']
   },
   pluginJs.configs.recommended,
+  ...pluginTailwind.configs['flat/recommended'],
 ];

src/develop/include/head/js.html

@@ -4,26 +4,21 @@
 <script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
 <script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
 <!-- END_MODULE Touch_SessionWithContribution -->
-<script src="https://unpkg.com/[email protected]" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script>
-<!-- BEGIN_MODULE Vite -->
-<!-- BEGIN_IF [{useDevServer}/eq/1] -->
-<script type="module" src="{devServerUrl}/@vite/client"></script>
-<!-- BEGIN_MODULE Touch_Admin -->
-<script type="module" src="{devServerUrl}/src/js/admin.js" async></script>
-<!-- END_MODULE Touch_Admin -->
-<script type="module" src="{devServerUrl}/src/js/main.js" async></script>
-<!-- ELSE -->
-<!-- BEGIN manifest -->
+
+<!-- BEGIN_MODULE Touch_NotAdmin -->
+@vite("src/js/main.js", {
+  "scriptTagAttributes": {
+    "async": true
+  }
+})
+<!-- END_MODULE Touch_NotAdmin -->
+
 <!-- BEGIN_MODULE Touch_Admin -->
-<!-- BEGIN src/js/admin.js -->
-<script type="module" src="/dist/{file}" async></script>
-<!-- END src/js/admin.js -->
+@vite(["src/js/main.js", "src/js/admin.js"], {
+  "scriptTagAttributes": {
+    "async": true
+  }
+})
 <!-- END_MODULE Touch_Admin -->
-<!-- BEGIN src/js/main.js -->
-<script type="module" src="/dist/{file}" async></script>
-<!-- END src/js/main.js -->
-<!-- END manifest -->
-<!-- END_IF -->
-<!-- END_MODULE Vite -->
 
 <!--BEGIN_MODULE Touch_Unlogin --><!-- BEGIN_MODULE Blog_Field id="BF_root" -->{google_analytics}[raw|allow_dangerous_tag]<!-- END_MODULE Blog_Field --><!-- END_MODULE Touch_Unlogin -->

src/develop/include/head/link.html

@@ -3,14 +3,4 @@
 <link rel="stylesheet" href="/css/acms-admin.min.css">
 <!-- END_MODULE Touch_SessionWithContribution -->
 
-<!-- BEGIN_MODULE Vite -->
-<!-- BEGIN manifest -->
-<!-- BEGIN src/js/main.js -->
-<!-- BEGIN css:loop -->
-<link rel="stylesheet" href="/dist/{css}" />
-<!-- END css:loop -->
-<!-- END src/js/main.js -->
-<!-- END manifest -->
-<!-- END_MODULE Vite -->
-
 @include("/include/head/structured-data.html")

src/develop/package.json

@@ -29,7 +29,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.2.0",
-    "eslint-plugin-tailwindcss": "^3.15.1",
+    "eslint-plugin-tailwindcss": "^3.17.3",
     "globals": "^15.2.0",
     "postcss": "^8.4.38",
     "rollup-plugin-visualizer": "^5.12.0",

src/develop/vite.config.js

@@ -1,74 +1,67 @@
 import path, { resolve, basename } from 'path';
-import { defineConfig, mergeConfig } from 'vite';
+import { defineConfig } from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 import eslint from 'vite-plugin-eslint2';
 import stylelint from 'vite-plugin-stylelint';
 import { viteStaticCopy } from 'vite-plugin-static-copy'
 
 const themeName = basename(__dirname);
-export default defineConfig(({ command, mode }) => {
-  return mergeConfig(
-    {
-      base: './',
-      define: {
-        'THEME_NAME': JSON.stringify(themeName),
-      },
-      plugins: [
-        eslint({
-          include: ['src/js/**/*.{js,jsx,ts,tsx,vue,svelte}'],
-          emitError: true,
-          emitWarning: true,
-          fix: true,
-        }),
-        stylelint({
-          include: ['src/style/**/*.{css,scss,sass,less,styl,vue,svelte}'],
-          fix: true,
-        }),
-        ...(command === 'build'
-          ? [
-              viteStaticCopy({
-                targets: [
-                  {
-                    src: 'node_modules/pdfjs-dist/build/pdf.worker.min.js',
-                    dest: 'pdfjs'
-                  },
-                  {
-                    src: 'node_modules/pdfjs-dist/cmaps',
-                    dest: 'pdfjs'
-                  }
-                ]
-              })
-            ]
-          : []),
-      ],
-      resolve: {
-        alias: {
-          '@': path.resolve(__dirname, './src/js'),
-          './src/js/': path.resolve(__dirname, './src/js'),
-        },
-      },
-      build: {
-        manifest: true, // dist に manifest.json を出力
-        rollupOptions: {
-          input: {
-            bundle: resolve(__dirname, 'src/js/main.js'),
-            admin: resolve(__dirname, 'src/js/admin.js'),
-          },
+export default defineConfig(({ command, mode }) => ({
+  base: './',
+  define: {
+    'THEME_NAME': JSON.stringify(themeName),
+  },
+  plugins: [
+    eslint({
+      include: ['src/js/**/*.{js,jsx,ts,tsx,vue,svelte}'],
+      emitError: true,
+      emitWarning: true,
+      fix: true,
+    }),
+    stylelint({
+      include: ['src/style/**/*.{css,scss,sass,less,styl,vue,svelte}'],
+      fix: true,
+    }),
+    (command === 'build' && viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/pdfjs-dist/build/pdf.worker.min.js',
+          dest: 'pdfjs'
         },
-        assetsInlineLimit: 4096, // 4kbより小さいアセットをインライン化
-      },
+        {
+          src: 'node_modules/pdfjs-dist/cmaps',
+          dest: 'pdfjs'
+        }
+      ]
+    })),
+    (mode === 'analyze' && visualizer({
+      open: true,
+      filename: 'dist/stats.html',
+      gzipSize: true,
+      brotliSize: true,
+    }))
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src/js'),
+      './src/js/': path.resolve(__dirname, './src/js'),
     },
-    mode === 'analyze'
-      ? {
-          plugins: [
-            visualizer({
-              open: true,
-              filename: 'dist/stats.html',
-              gzipSize: true,
-              brotliSize: true,
-            }),
-          ],
+  },
+  build: {
+    manifest: true, // dist に manifest.json を出力
+    rollupOptions: {
+      input: {
+        bundle: resolve(__dirname, 'src/js/main.js'),
+        admin: resolve(__dirname, 'src/js/admin.js'),
+      },
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            return 'vendor';
+          }
         }
-      : {}
-  );
-});
+      }
+    },
+    assetsInlineLimit: 4096, // 4kbより小さいアセットをインライン化
+  },
+}));