hwe/b_inheritPoint.php

@@ -43,6 +43,8 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=1024" />
+    <?= WebUtil::preloadCSS('css/inheritPoint.css') ?>
+    <?= WebUtil::preloadJS('js/inheritPoint.js') ?>
     <?= WebUtil::printCSS('../e_lib/bootstrap.min.css') ?>
     <?= WebUtil::printCSS('../d_shared/common.css') ?>
     <?= WebUtil::printCSS('../css/config.css') ?>
@@ -52,14 +54,13 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
     <?= WebUtil::printJS('../e_lib/jquery-3.3.1.min.js') ?>
     <?= WebUtil::printJS('../e_lib/bootstrap.bundle.min.js') ?>
     <?= WebUtil::printJS('js/common.js') ?>
-    <?= WebUtil::printJS('js/inheritPoint.js') ?>
 <script>
     var items = <?=Json::encode($items)?>;
     var helpText = <?=Json::encode($pointHelpText)?>;
 </script>
 </head>
 
-<body onload="formStart()">
+<body>
 
     <table style='width:1000px;margin:auto;' class='tb_layout bg0'>
         <tr>
@@ -126,6 +127,9 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
             <?php endforeach; ?>
         </div>
     </div>
+    <div id="app"></div>
+    
+    <?= WebUtil::printJS('js/inheritPoint.js') ?>
 </body>
 
 </html>

hwe/js/inheritPoint.js

@@ -1,2 +1,2 @@
-(()=>{var t={762:t=>{t.exports=function(t,e){for(var r,n=-1,o=t.length;++n<o;){var u=e(t[n]);void 0!==u&&(r=void 0===r?u:r+u)}return r}},557:t=>{t.exports=function(t){return t}},297:(t,e,r)=>{var n=r(762),o=r(557);t.exports=function(t){return t&&t.length?n(t,o):0}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var u=e[n]={exports:{}};return t[n](u,u.exports,r),u.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";var t=r(297),e=r.n(t);function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&y(t,e)}function c(t){var e=p();return function(){var r,n=v(t);if(e){var o=v(this).constructor;r=Reflect.construct(n,arguments,o)}elsLine truncated
+(()=>{var t={762:t=>{t.exports=function(t,e){for(var r,n=-1,o=t.length;++n<o;){var u=e(t[n]);void 0!==u&&(r=void 0===r?u:r+u)}return r}},557:t=>{t.exports=function(t){return t}},297:(t,e,r)=>{var n=r(762),o=r(557);t.exports=function(t){return t&&t.length?n(t,o):0}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var u=e[n]={exports:{}};return t[n](u,u.exports,r),u.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";var t=r(297),e=r.n(t);function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&y(t,e)}function c(t){var e=p();return function(){var r,n=v(t);if(e){var o=v(this).constructor;r=Reflect.construct(n,arguments,o)}elsLine truncated
 //# sourceMappingURL=inheritPoint.js.map

hwe/js/inheritPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"inheritPoint.js","mappings":"qBAuBAA,EAAOC,QAdP,SAAiBC,EAAOC,GAKtB,IAJA,IAAIC,EACAC,GAAS,EACTC,EAASJ,EAAMI,SAEVD,EAAQC,GAAQ,CACvB,IAAIC,EAAUJ,EAASD,EAAMG,SACbG,IAAZD,IACFH,OAAoBI,IAAXJ,EAAuBG,EAAWH,EAASG,GAGxD,OAAOH,I,QCATJ,EAAOC,QAJP,SAAkBQ,GAChB,OAAOA,I,cCjBT,IAAIC,EAAU,EAAQ,KAClBC,EAAW,EAAQ,KAsBvBX,EAAOC,QANP,SAAaC,GACX,OAAQA,GAASA,EAAMI,OACnBI,EAAQR,EAAOS,GACf,KCnBFC,EAA2B,GAG/B,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBN,IAAjBO,EACH,OAAOA,EAAad,QAGrB,IAAID,EAASY,EAAyBE,GAAY,CAGjDb,QAAS,IAOV,OAHAe,EAAoBF,GAAUd,EAAQA,EAAOC,QAASY,GAG/Cb,EAAOC,QCpBfY,EAAoBI,EAAKjB,IACxB,IAAIkB,EAASlB,GAAUA,EAAOmB,WAC7B,IAAOnB,EAAiB,QACxB,IAAM,EAEP,OADAa,EAAoBO,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,GCLRL,EAAoBO,EAAI,CAACnB,EAASqB,KACjC,IAAI,IAAIC,KAAOD,EACXT,EAAoBW,EAAEF,EAAYC,KAASV,EAAoBW,EAAEvB,EAASsB,IAC5EE,OAAOC,eAAezB,EAASsB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3EV,EAAoBW,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,G,o2ECG3E,IAeMI,EAAb,yLACkB,mBADlB,YAfA,uB,IAAA,OAEI,aAAyC,MAAtBC,EAAsB,uDAAJ,GAAI,qBACrC,cAAMA,IAD+B,OAD3B,gBAC2B,EAAtBA,QAAAA,EAAsB,EAF7C,O,EAAA,G,EAAA,uBAKI,WACI,OAAIC,KAAKD,QACEC,KAAKC,KAAO,KAAOD,KAAKD,QAGxBC,KAAKC,U,iBAVxB,KAAkCC,SAmB3B,SAASC,EAAUnC,GACtB,GAAIA,MAAAA,EACA,MAAM,IAAI8B,EAEd,OAAO9B,E,87BCaXoC,OAAOC,UAzBP,WAEI,IAAMC,EAAOH,EAAOI,SAASC,cAAc,uBACrCC,EAAON,EAAOI,SAASC,cAAc,4BACrCE,EAAOP,EAAOI,SAASC,cAAc,uBAErCG,EAAWC,KAAKC,MAAM,IAAIxB,OAAOyB,OAAOV,OAAOW,SAC/CC,EAAWJ,KAAKC,MAAMT,OAAOW,MAAP,UACtBE,EAAcN,EAAWK,EAE/BV,EAAKjC,MAAQsC,EAASOLine truncated
+{"version":3,"file":"inheritPoint.js","mappings":"qBAuBAA,EAAOC,QAdP,SAAiBC,EAAOC,GAKtB,IAJA,IAAIC,EACAC,GAAS,EACTC,EAASJ,EAAMI,SAEVD,EAAQC,GAAQ,CACvB,IAAIC,EAAUJ,EAASD,EAAMG,SACbG,IAAZD,IACFH,OAAoBI,IAAXJ,EAAuBG,EAAWH,EAASG,GAGxD,OAAOH,I,QCATJ,EAAOC,QAJP,SAAkBQ,GAChB,OAAOA,I,cCjBT,IAAIC,EAAU,EAAQ,KAClBC,EAAW,EAAQ,KAsBvBX,EAAOC,QANP,SAAaC,GACX,OAAQA,GAASA,EAAMI,OACnBI,EAAQR,EAAOS,GACf,KCnBFC,EAA2B,GAG/B,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBN,IAAjBO,EACH,OAAOA,EAAad,QAGrB,IAAID,EAASY,EAAyBE,GAAY,CAGjDb,QAAS,IAOV,OAHAe,EAAoBF,GAAUd,EAAQA,EAAOC,QAASY,GAG/Cb,EAAOC,QCpBfY,EAAoBI,EAAKjB,IACxB,IAAIkB,EAASlB,GAAUA,EAAOmB,WAC7B,IAAOnB,EAAiB,QACxB,IAAM,EAEP,OADAa,EAAoBO,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,GCLRL,EAAoBO,EAAI,CAACnB,EAASqB,KACjC,IAAI,IAAIC,KAAOD,EACXT,EAAoBW,EAAEF,EAAYC,KAASV,EAAoBW,EAAEvB,EAASsB,IAC5EE,OAAOC,eAAezB,EAASsB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3EV,EAAoBW,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,G,o2ECG3E,IAeMI,EAAb,yLACkB,mBADlB,YAfA,uB,IAAA,OAEI,aAAyC,MAAtBC,EAAsB,uDAAJ,GAAI,qBACrC,cAAMA,IAD+B,OAD3B,gBAC2B,EAAtBA,QAAAA,EAAsB,EAF7C,O,EAAA,G,EAAA,uBAKI,WACI,OAAIC,KAAKD,QACEC,KAAKC,KAAO,KAAOD,KAAKD,QAGxBC,KAAKC,U,iBAVxB,KAAkCC,SAmB3B,SAASC,EAAUnC,GACtB,GAAIA,MAAAA,EACA,MAAM,IAAI8B,EAEd,OAAO9B,E,+7BCZX,WAEI,IAAMoC,EAAOD,EAAOE,SAASC,cAAc,uBACrCC,EAAOJ,EAAOE,SAASC,cAAc,4BACrCE,EAAOL,EAAOE,SAASC,cAAc,uBAErCG,EAAWC,KAAKC,MAAM,IAAItB,OAAOuB,OAAOC,OAAOC,SAC/CC,EAAWL,KAAKC,MAAME,OAAOC,MAAP,UACtBE,EAAcP,EAAWM,EAE/BX,EAAK/B,MAAQoC,EAASQ,iBACtBV,EAAKLine truncated

hwe/ts/inheritPoint.ts

@@ -37,4 +37,4 @@ function formStart() {
     }
 }
 
-window.formStart = formStart;
+formStart();

hwe/ts/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package.json

@@ -38,8 +38,7 @@
     "sass-loader": "^12.1.0",
     "style-loader": "^3.2.1",
     "typescript": "^4.3.5",
-    "vue-loader": "^15.9.8",
-    "vue-style-loader": "^4.1.3",
+    "vue-loader": "^16.5.0",
     "webpack": "^5.49.0",
     "webpack-cli": "^4.7.2"
   },

src/sammo/WebUtil.php

@@ -103,6 +103,42 @@ class WebUtil
         return $decoded;
     }
 
+    public static function preloadCSS(string $path){
+        $upath = \phpUri::parse($path);
+        $path = $upath->join('');
+        if(!$upath->scheme && file_exists($upath->path)){
+            $mtime = filemtime($upath->path);
+            if($upath->query){
+                $tail = '&'.$mtime;
+            }
+            else{
+                $tail = '?'.$mtime;
+            }
+        }
+        else{
+            $tail = '';
+        }
+        return "<link href='{$path}{$tail}' rel='preload' as='style'>\n";
+    }
+
+    public static function preloadJS(string $path){
+        $upath = \phpUri::parse($path);
+        $path = $upath->join('');
+        if(!$upath->scheme && file_exists($upath->path)){
+            $mtime = filemtime($upath->path);
+            if($upath->query){
+                $tail = '&'.$mtime;
+            }
+            else{
+                $tail = '?'.$mtime;
+            }
+        }
+        else{
+            $tail = '';
+        }
+        return "<link href='{$path}{$tail}' rel='preload' as='script'>\n";
+    }
+
     public static function printJS(string $path){
         //async, defer 옵션 고려
         $upath = \phpUri::parse($path);