trying to use literas in templates (Babel for ie11)

viT-1 · Oct 24, 2019 · d39e560 · d39e560
1 parent f4b8e7a
commit d39e560
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 20 deletions.
diff --git a/gulpfile.esm.js b/gulpfile.esm.js
@@ -1,4 +1,5 @@
 import del from 'del';
+import gBabel from 'gulp-babel';
 import gMinifyCss from 'gulp-clean-css';
 import gConcat from 'gulp-concat';
 import gHtml2Js from 'gulp-html-to-js';
@@ -30,6 +31,12 @@ task('tmpl2js',
 	() => src([`${absSrc}/**/*.html`])
 		.pipe(gHtml2Js())
 		.pipe(gReplace('module.exports =', 'export default'))
+		// BUG?! Babel is not transformed string/template literals!
+		.pipe(gBabel({
+			plugins: [
+				['@babel/plugin-transform-template-literals'],
+			],
+		}))
 		.pipe(dest(absDest)));
 
 task('postdeploy.dev:copyNonTranspiledFiles',
@@ -126,7 +133,7 @@ task('deleteNModules',
 // fix because of names of modules with src includes generated dist
 task('fixBundle',
 	() => src([
-		path.resolve(absDest, 'bundle.js'),
+		path.resolve(absDest, 'bundle.system.js'),
 	])
 		// fix templates as string
 		.pipe(gReplace(`register("${appConf.destFolderName}`, `register("${appConf.srcFolderName}`))
@@ -147,7 +154,7 @@ task('copySystemJs', // not in 'copyNonTranspiledFiles' because of dest
 task('copyNonTranspiledFiles',
 	() => src([
 		path.resolve(absSrc, appConf.entryFileName),
-		path.resolve(absSrc, 'importmap.json'),
+		path.resolve(absSrc, 'importmap.system.json'),
 		path.resolve('node_modules', 'promise-polyfill', 'dist', 'polyfill.min.js'),
 		path.resolve('node_modules', 'whatwg-fetch', 'dist', 'fetch.umd.js'),
 	])

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
         "es6 modules",
         "vue",
         "vue 3.0",
-		"vue-class-component",
-		"vue-property-decorator",
+        "vue-class-component",
+        "vue-property-decorator",
         "jest",
         "unittest"
     ],
@@ -51,6 +51,8 @@
         "whatwg-fetch": "3.0.0"
     },
     "devDependencies": {
+        "@babel/core": "7.4.4",
+        "@babel/plugin-transform-template-literals": "7.4.4",
         "@types/express": "4.17.1",
         "@types/jest": "24.0.19",
         "@types/node": "12.11.5",
@@ -69,6 +71,7 @@
         "eslint-plugin-markdown": "1.0.1",
         "esm": "3.2.25",
         "gulp": "4.0.2",
+        "gulp-babel": "8.0.0",
         "gulp-clean-css": "4.2.0",
         "gulp-concat": "2.6.1",
         "gulp-html-to-js": "0.0.7",

diff --git a/src/common.blocks/IamHeader/IamHeader.html b/src/common.blocks/IamHeader/IamHeader.html
@@ -1 +1 @@
-<label :iam-header="computeSome"><slot></slot></label>
+<label :iam-header="computeSome"><slot></slot> & {{`${computeSome}-01`}}</label>
diff --git a/src/importmap.json → src/importmap.system.json b/src/importmap.json → src/importmap.system.json
diff --git a/src/index.htm b/src/index.htm
@@ -19,9 +19,9 @@
 	<div class="js-app">
 		<iam-header some="thing">Test SystemJS & Vue</iam-header>
 	</div>
-	<script type="systemjs-importmap" src="importmap.json"></script>
+	<script type="systemjs-importmap" src="importmap.system.json"></script>
 	<script>
-		System.import('./bundle.js')
+		System.import('./bundle.system.js')
 			.then(function () {
 				console.log('SystemJs bundle is loaded!');
 				System.import('src/main');

diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -4,7 +4,7 @@
 		"module": "system",
 		"target": "es5",
 		"rootDir": ".",
-		"outFile": "../dist/bundle.js"
+		"outFile": "../dist/bundle.system.js"
 	},
 	"files": [
 		"../dist/**/*.html.js",