Update vite multiple input build configuration

app/assets/.gitignore

@@ -0,0 +1,2 @@
+main/
+admin/

app/controllers/base-controller.php

@@ -2,17 +2,16 @@
 
 namespace  Sakura\Controllers;
 
+use Sakura\Lib\BaseClass;
+
 /**
  * The controller abstract base
  * @since 1.0.0
  * @license GPLv3
  * @author mashirozx <moezhx@outlook.com>
  */
-class BaseController
+class BaseController extends BaseClass
 {
-  public static $version = SAKURA_VERSION;
-  public static $text_domain = SAKURA_TEXT_DOMAIN;
-
   /**
    * The rest API request parameters
    * @since 0.0.1

app/functions.php

@@ -5,6 +5,9 @@
 define('SAKURA_VERSION', wp_get_theme()->get('Version'));
 define('SAKURA_TEXT_DOMAIN', wp_get_theme()->get('TextDomain'));
 
+define('SAKURA_DEVEPLOMENT', false);
+define('SAKURA_DEVEPLOMENT_HOST', 'http://127.0.0.1:9000');
+
 // PHP loaders
 require_once(__DIR__ . '/loader.php');
 

app/helpers/admin-page-helper.php

@@ -5,11 +5,8 @@ namespace Sakura\Helpers;
 use Sakura\Helpers\ViteHelper;
 use Sakura\Controllers\InitStateController;
 
-class AdminPageHelper
+class AdminPageHelper extends ViteHelper
 {
-  public static $version = SAKURA_VERSION;
-  public static $text_domain = SAKURA_TEXT_DOMAIN;
-
   public $page_title;
   public $menu_title;
   public $menu_slug;
@@ -35,16 +32,19 @@ class AdminPageHelper
   {
     if ("appearance_page_{$this->menu_slug}" === $hook) {
       $this->enqueue_common_scripts();
-      // $this->enqueue_development_scripts();
+      if (SAKURA_DEVEPLOMENT) {
-      $this->enqueue_production_scripts();
+        $this->enqueue_development_scripts();
+      } else {
+        $this->enqueue_production_scripts();
+      }
     }
   }
 
   public function enqueue_development_scripts()
   {
-    wp_enqueue_script('[type:module]vite-client', ViteHelper::$development_host . '/@vite/client', array(), null, false);
+    wp_enqueue_script('[type:module]vite-client', self::$development_host . '/@vite/client', array(), null, false);
 
-    wp_enqueue_script('[type:module]dev-main', ViteHelper::$development_host . '/src/admin/main.ts', array(), null, true);
+    wp_enqueue_script('[type:module]dev-main', self::$development_host . '/src/admin/main.ts', array(), null, true);
 
     wp_localize_script('[type:module]dev-main', 'InitState', (new InitStateController())->get_initial_state());
   }
@@ -52,8 +52,8 @@ class AdminPageHelper
   public function enqueue_production_scripts()
   {
     $entry_key = 'src/admin/main.ts';
-    $assets_base_path = get_template_directory_uri() . '/assets/dist/';
+    $assets_base_path = get_template_directory_uri() . '/assets/admin/';
-    $manifest = ViteHelper::get_manifest_file();
+    $manifest = self::get_manifest_file('admin');
 
     // <script type="module" crossorigin src="http://localhost:9000/assets/index.36b06f45.js"></script>
     wp_enqueue_script('[type:module]chunk-vendors.js', $assets_base_path . $manifest[$entry_key]['file'], array(), null, false);

app/helpers/vite-helper.php

@@ -2,19 +2,21 @@
 
 namespace Sakura\Helpers;
 
+use Sakura\Lib\BaseClass;
 use Sakura\Controllers\InitStateController;
 
-class ViteHelper
+class ViteHelper extends BaseClass
 {
-  // TODO: use a common .env file
+  public static $development_host = SAKURA_DEVEPLOMENT_HOST;
-  // public $development_host = 'http://192.168.28.26:9000';
-  public static $development_host = 'http://127.0.0.1:9000';
 
   function __construct()
   {
     add_action('wp_enqueue_scripts', [$this, 'enqueue_common_scripts']);
-    // add_action('wp_enqueue_scripts', [$this, 'enqueue_development_scripts']);
+    if (SAKURA_DEVEPLOMENT) {
-    add_action('wp_enqueue_scripts', [$this, 'enqueue_production_scripts']);
+      add_action('wp_enqueue_scripts', [$this, 'enqueue_development_scripts']);
+    } else {
+      add_action('wp_enqueue_scripts', [$this, 'enqueue_production_scripts']);
+    }
     // add tag filters
     add_filter('script_loader_tag', [$this, 'script_tag_filter'], 10, 3);
     add_filter('style_loader_tag', [$this, 'style_tag_filter'], 10, 3);
@@ -32,8 +34,8 @@ class ViteHelper
   public function enqueue_production_scripts()
   {
     $entry_key = 'src/main.ts';
-    $assets_base_path = get_template_directory_uri() . '/assets/dist/';
+    $assets_base_path = get_template_directory_uri() . '/assets/main/';
-    $manifest = $this->get_manifest_file();
+    $manifest = $this->get_manifest_file('main');
 
     // <script type="module" crossorigin src="http://localhost:9000/assets/index.36b06f45.js"></script>
     wp_enqueue_script('[type:module]chunk-entrance.js', $assets_base_path . $manifest[$entry_key]['file'], array(), null, false);
@@ -91,9 +93,9 @@ class ViteHelper
     return $tag;
   }
 
-  public static function get_manifest_file()
+  public static function get_manifest_file(string $namespace)
   {
-    $manifest = file_get_contents(__DIR__ . '/../assets/dist/manifest.json');
+    $manifest = file_get_contents(__DIR__ . "/../assets/{$namespace}/manifest.json");
     return json_decode($manifest, true);
   }
 }

app/lib/base-class.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace Sakura\Lib;
+
+class BaseClass
+{
+  public static $version = SAKURA_VERSION;
+  public static $text_domain = SAKURA_TEXT_DOMAIN;
+}

app/models/base-model.php

@@ -2,8 +2,8 @@
 
 namespace Sakura\Models;
 
-class BaseModel
+use Sakura\Lib\BaseClass;
+
+class BaseModel extends BaseClass
 {
-  public static $version = SAKURA_VERSION;
-  public static $text_domain = SAKURA_TEXT_DOMAIN;
 }

package.json

@@ -4,7 +4,9 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "yarn bulid:main && yarn build:admin",
+    "bulid:main": "APP_TARGET=main vite build",
+    "build:admin": "APP_TARGET=admin vite build",
     "build:strict": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
     "test": "jest --coverage",

vite.config.ts

@@ -4,6 +4,8 @@ import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import svgicon from 'vite-plugin-svgicon'
 
+const target = process.env.APP_TARGET
+
 // https://vitejs.dev/config/
 export default defineConfig({
   base: 'http://localhost:9000/',
@@ -39,14 +41,11 @@ export default defineConfig({
     target: 'modules',
     manifest: true,
     sourcemap: true,
-    outDir: 'app/assets/dist',
+    outDir: target === 'main' ? 'app/assets/main' : 'app/assets/admin',
     chunkSizeWarningLimit: 2048,
     rollupOptions: {
       // external: ['vue'],
-      input: {
+      input: [path.resolve(__dirname, target === 'main' ? 'src/main.ts' : 'src/admin/main.ts')],
-        main: path.resolve(__dirname, 'src/main.ts'),
-        admin: path.resolve(__dirname, 'src/admin/main.ts'),
-      },
       output: {
         // TODO: use ES5 bundle instead
         // globals: {