feat(jest): update snapshot resolver

package.json

@@ -26,6 +26,7 @@
     "lint": "eslint packages/ --ext .js --ext .ts --ext .tsx",
     "lint:style": "stylelint ./packages/**/*.{css,scss}",
     "test": "pnpm --if-present -r --aggregate-output --filter=./packages/* test:ci",
+    "updateSnapshot": "pnpm --if-present -r --aggregate-output --filter=./packages/* updateSnapshot",
     "version": "run-s version:*",
     "version:release": "pnpm --parallel -r --aggregate-output --filter=./packages/* exec npm version ${npm_package_version}",
     "version:git": "git add . && git commit -m \"chore(release): publish ${npm_package_version}\"",

packages/jest-helper/.gitignore

@@ -0,0 +1 @@
+lib

packages/jest-helper/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "jest-taro-helper",
+  "version": "3.6.6",
+  "description": "jest helper for taro",
+  "private": true,
+  "main": "index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@jest/test-sequencer": "^29.5.0",
+    "jest-runner": "^29.5.0",
+    "typescript": "^4.7.4",
+    "pretty-format": "^29.5.0"
+  }
+}

packages/jest-helper/src/sequencer.ts

@@ -0,0 +1,10 @@
+import type { Test } from 'jest-runner'
+
+const Sequencer = require('@jest/test-sequencer').default
+
+export default class CustomSequencer extends Sequencer {
+  sort (tests: Test[]) {
+    const copyTests = Array.from(tests)
+    return copyTests.sort((testA, testB) => testA.path.localeCompare(testB.path))
+  }
+}

packages/jest-helper/src/snapshot/resolver.ts

@@ -0,0 +1,24 @@
+import * as path from 'path'
+
+const TEST_DIR = '__tests__'
+const SNAPSHOT_DIR = '__snapshots__'
+
+export const resolveSnapshotPath = (testPath: string, snapshotExtension: string) => {
+  return testPath.replace(TEST_DIR, SNAPSHOT_DIR) + snapshotExtension
+}
+
+export const resolveTestPath = (snapshotPath: string, snapshotExtension: string) => {
+  return snapshotPath.replace(snapshotExtension, '').replace(SNAPSHOT_DIR, TEST_DIR)
+}
+
+export const testPathForConsistencyCheck = path.posix.join(
+  'consistency_check',
+  TEST_DIR,
+  'example.test.js'
+)
+
+export default {
+  resolveSnapshotPath,
+  resolveTestPath,
+  testPathForConsistencyCheck
+}

packages/jest-helper/src/snapshot/serializers.ts

@@ -0,0 +1,55 @@
+import * as os from 'os'
+// import type { Config, Refs, Printer } from 'pretty-format'
+
+export const print = (val: string) => {
+  // Note: 对齐各平台的路径分隔符
+  return val.replace(/\\*\*\sfilePath:\s(.*)\s\*\*\//g, (replaceValue) => replaceValue.replace(/\\/g, '/'))
+}
+
+export const parseSnapshotByFilePath = (val: string) => {
+  const arr = val.split(new RegExp(os.EOL + '|\n'))
+  let key = ''
+  return arr.reduce((acc, cur) => {
+    if (cur.startsWith('/** filePath:')) {
+      key = cur.replace(/\\/g, '/')
+      acc[key] = ''
+    } else {
+      acc[key] ||= ''
+      if (acc[key] !== '') {
+        acc[key] += '\n'
+      }
+      acc[key] += cur
+    }
+    return acc
+  }, {})
+}
+
+export const snapshotObject2String = (val: Record<string, string>) => {
+  return `"\n${Object.entries(val)
+    .sort(([key1], [key2]) => key1.localeCompare(key2))
+    .filter(([key]) => key !== '')
+    .map(([key, value]) => `${key}\n${value}`)
+    .join('\n')}"`
+}
+
+export const serialize = (
+  val: any,
+  // config: Config,
+  // indentation: string,
+  // depth: number,
+  // refs: Refs,
+  // printer: Printer,
+) => {
+  if (typeof val === 'string') {
+    return snapshotObject2String(parseSnapshotByFilePath(val))
+  }
+  return val
+}
+
+export const test = (val: unknown) => typeof val === 'string'
+
+export default {
+  // print,
+  serialize,
+  test,
+}

packages/jest-helper/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.root.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "lib",
+    "rootDir": "./src",
+    "module": "commonjs"
+  },
+  "include": ["./src"],
+  "exclude": ["./src/__tests__"]
+}

packages/taro-mini-runner/jest.config.js → packages/taro-mini-runner/jest.config.ts

@@ -1,7 +1,10 @@
-module.exports = {
+import type { Config } from 'jest'
+
+const config: Config = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx', 'node'],
   preset: 'ts-jest',
-  setupFilesAfterEnv: ['./src/__tests__/setup/index.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/__tests__/setup/index.ts'],
+  snapshotSerializers: ['jest-taro-helper/lib/snapshot/serializers.js'],
   testEnvironment: 'node',
   testEnvironmentOptions: {},
   testMatch: ['**/__tests__/?(*.)+(spec|test).[jt]s?(x)'],
@@ -20,3 +23,5 @@ module.exports = {
     'node_modules',
   ],
 }
+
+export default config

packages/taro-mini-runner/package.json

@@ -94,6 +94,7 @@
     "babel-jest": "^29.5.0",
     "jest": "^29.3.1",
     "jest-cli": "^29.3.1",
+    "jest-taro-helper": "workspace:*",
     "jest-transform-css": "^6.0.1",
     "jest-environment-node": "^29.5.0",
     "memfs": "^3.1.2",

packages/taro-plugin-http/package.json

@@ -34,7 +34,7 @@
     "@tarojs/shared": "workspace:*"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "jest": "^29.3.1",
     "jest-cli": "^29.3.1",

packages/taro-rn/src/lib/index.ts

@@ -1,5 +1,4 @@
 // 由 getLibList.js 脚本生成, 不要进行手动修改, 请不要手动修改
-export * from './ENV_TYPE'
 export * from './arrayBufferToBase64'
 export * from './authorize'
 export * from './base64ToArrayBuffer'
@@ -15,6 +14,7 @@ export * from './createInnerAudioContext'
 export * from './createSelectorQuery'
 export * from './createVideoContext'
 export * from './downloadFile'
+export * from './ENV_TYPE'
 export * from './getAppBaseInfo'
 export * from './getClipboardData'
 export * from './getEnv'

packages/taro-webpack-runner/jest.config.js → packages/taro-webpack-runner/jest.config.ts

@@ -1,11 +1,14 @@
-module.exports = {
+import type { Config } from 'jest'
+
+const config: Config = {
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   moduleNameMapper: {
     '@pmmmwh/react-refresh-webpack-plugin': '<rootDir>/src/__tests__/mocks/react-refresh',
     '@prefresh/webpack': '<rootDir>/src/__tests__/mocks/react-refresh'
   },
   preset: 'ts-jest',
-  setupFilesAfterEnv: ['./src/__tests__/setup/index.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/__tests__/setup/index.ts'],
+  snapshotSerializers: ['jest-taro-helper/lib/snapshot/serializers.js'],
   testEnvironment: 'node',
   testEnvironmentOptions: {},
   testMatch: ['**/__tests__/?(*.)+(spec|test).[jt]s?(x)'],
@@ -23,3 +26,5 @@ module.exports = {
     'node_modules',
   ],
 }
+
+export default config

packages/taro-webpack-runner/package.json

@@ -77,6 +77,7 @@
     "jest": "^29.3.1",
     "jest-cli": "^29.3.1",
     "jest-environment-node": "^29.5.0",
+    "jest-taro-helper": "workspace:*",
     "jest-transform-css": "^6.0.1",
     "memfs": "^3.1.2",
     "memory-fs": "^0.5.0",

packages/taro-webpack-runner/src/__tests__/__snapshots__/babel.spec.ts.snap

@@ -47,10 +47,8 @@ exports[`babel should convert do expressions 2`] = `
 
 /** filePath: dist/css/1.css **/
 
-
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 

packages/taro-webpack-runner/src/__tests__/__snapshots__/compiler-macros.spec.ts.snap

@@ -42,10 +42,8 @@ exports[`compiler-macros - defineAppConfig and definePageConfig should read app
 
 /** filePath: dist/css/1.css **/
 
-
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 

packages/taro-webpack-runner/src/__tests__/__snapshots__/config.spec.ts.snap

@@ -54,10 +54,8 @@ exports[`config should build from origin and pipe to output 2`] = `
 
 /** filePath: output/css/1.css **/
 
-
 /** filePath: output/css/app.css **/
 
-
 /** filePath: output/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 
@@ -1554,10 +1552,8 @@ exports[`config should copy assets 2`] = `
 
 /** filePath: dist/css/1.css **/
 
-
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 
@@ -3062,10 +3058,8 @@ exports[`config should resolved alias 2`] = `
 
 /** filePath: dist/css/2.css **/
 
-
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script><script src="/js/extra.js"></script></body></html>
 

packages/taro-webpack-runner/src/__tests__/__snapshots__/css-modules.spec.ts.snap

@@ -74,7 +74,6 @@ exports[`css modules should use css modules with global mode 2`] = `
 
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 
@@ -1589,7 +1588,6 @@ exports[`css modules should use css modules with module mode 2`] = `
 
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 

packages/taro-webpack-runner/src/__tests__/__snapshots__/nerv.spec.ts.snap

@@ -54,10 +54,8 @@ exports[`nerv should build nerv app 2`] = `
 
 /** filePath: dist/css/1.css **/
 
-
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 

packages/taro-webpack-runner/src/__tests__/__snapshots__/react.spec.ts.snap

@@ -54,10 +54,8 @@ exports[`react should build react app 2`] = `
 
 /** filePath: dist/css/1.css **/
 
-
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 

packages/taro-webpack-runner/src/__tests__/__snapshots__/sass.spec.ts.snap

@@ -1532,7 +1532,6 @@ exports[`sass should build app with scss 2`] = `
 
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>
 

packages/taro-webpack-runner/src/__tests__/__snapshots__/subpackages.spec.ts.snap

@@ -123,10 +123,8 @@ exports[`subpackages should process subpackages 2`] = `
 
 /** filePath: dist/css/2.css **/
 
-
 /** filePath: dist/css/app.css **/
 
-
 /** filePath: dist/index.html **/
 <!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><script>!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);</script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/app.js"></script></body></html>