feat: add support for typescript pages and components

packages/saber/package.json

@@ -26,6 +26,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.5.0",
     "@babel/preset-env": "^7.5.4",
+    "@babel/preset-typescript": "^7.6.0",
     "@babel/runtime": "^7.5.4",
     "@egoist/postcss-loader": "^3.0.2",
     "@intervolga/optimize-cssnano-plugin": "^1.0.6",

packages/saber/src/babel/preset.js

@@ -3,7 +3,7 @@ const path = require('path')
 const env = process.env.BABEL_ENV || process.env.NODE_ENV
 const isEnvTest = env === 'test'
 
-module.exports = (_, { isServer } = {}) => {
+module.exports = (_, { isServer, alwaysEnableTypeScript } = {}) => {
   const presets = [
     [
       require('@babel/preset-env'),
@@ -21,6 +21,13 @@ module.exports = (_, { isServer } = {}) => {
             // Exclude transforms that make all code slower
             exclude: ['transform-typeof-symbol']
           }
+    ],
+    [
+      require('@babel/preset-typescript'),
+      {
+        jsxPragma: 'h',
+        allExtensions: alwaysEnableTypeScript
+      }
     ]
   ]
 

packages/saber/src/plugins/transformer-components.js

@@ -38,7 +38,7 @@ exports.apply = api => {
   })
 
   api.transformers.add('js', {
-    extensions: ['js'],
+    extensions: ['js', 'jsx', 'ts', 'tsx'],
     transform(page) {
       const { data } = require('../utils/parseAttributes')(
         page.content,

packages/saber/src/vue-renderer/index.js

@@ -136,11 +136,11 @@ export class VueRenderer {
           .options(pageLoaderOptions)
 
       // Get the available extensions for pages
-      // Excluding .vue and .js pages because we handled them in their own rules
+      // Excluding .vue .jsx? .tsx? pages because we handled them in their own rules
       const { supportedExtensions } = api.transformers
       const pageExtensions = supportedExtensions
         .map(ext => new RegExp(`\\.${ext}$`))
-        .filter(re => !re.test('.js') && !re.test('.vue'))
+        .filter(re => !re.test('.js') && !re.test('.vue') && !re.test('.ts'))
         .concat(/\.saberpage$/)
 
       config.module

packages/saber/src/webpack/babel-loader.js

@@ -53,12 +53,17 @@ module.exports = babelLoader.custom(babel => {
         }
       }
 
+      const { filename = '' } = cfg.options
       options.presets.unshift(
         babel.createConfigItem(
           [
             require('../babel/preset'),
             {
-              isServer: customOptions.type === 'server'
+              isServer: customOptions.type === 'server',
+              // Like ts-loader's `appendTsSuffixTo: [/\.vue$/]` option
+              alwaysEnableTypeScript: filename.endsWith('.vue')
+                ? true
+                : undefined
             }
           ],
           {

packages/saber/src/webpack/webpack.config.js

@@ -49,7 +49,7 @@ module.exports = (api, { type }) => {
 
   config.module
     .rule('js')
-    .test(/\.js$/)
+    .test([/\.jsx?$/, /\.tsx?$/])
     .include.add(filepath => {
       if (api.browserApi.has(filepath)) {
         return true

website/pages/index.vue

@@ -53,17 +53,18 @@
 
 
 <script>
+import Vue from 'vue'
 import Logo from '@/src/components/Logo.vue'
 
 export const attributes = {
   layout: 'index'
 }
 
-export default {
+export default Vue.extend({
   components: {
     Logo
   }
-}
+})
 </script>
 
 <style scoped>

yarn.lock

@@ -69,6 +69,18 @@
     "@babel/traverse" "^7.4.4"
     "@babel/types" "^7.4.4"
 
+"@babel/helper-create-class-features-plugin@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.6.0.tgz#769711acca889be371e9bc2eb68641d55218021f"
+  integrity sha512-O1QWBko4fzGju6VoVvrZg0RROCVifcLxiApnGP3OWfWzvxRZFCoBD81K5ur5e3bVY2Vf/5rIJm8cqPKn8HUJng==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-member-expression-to-functions" "^7.5.5"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.5.5"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+
 "@babel/helper-define-map@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.5.5.tgz#3dec32c2046f37e09b28c93eb0b103fd2a25d369"
@@ -334,6 +346,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-typescript@^7.2.0":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991"
+  integrity sha512-dGwbSMA1YhVS8+31CnPR7LB4pcbrzcV99wQzby4uAfrkZPYZlQ7ImwdpzLqi6Z6IL02b8IAL379CaMwo0x5Lag==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-transform-arrow-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
@@ -581,6 +600,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-typescript@^7.6.0":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.6.3.tgz#dddb50cf3b8b2ef70b22e5326e9a91f05a1db13b"
+  integrity sha512-aiWINBrPMSC3xTXRNM/dfmyYuPNKY/aexYqBgh0HBI5Y+WO5oRAqW/oROYeYHrF4Zw12r9rK4fMk/ZlAmqx/FQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.6.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-typescript" "^7.2.0"
+
 "@babel/plugin-transform-unicode-regex@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.6.2.tgz#b692aad888a7e8d8b1b214be6b9dc03d5031f698"
@@ -646,6 +674,14 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
+"@babel/preset-typescript@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz#25768cb8830280baf47c45ab1a519a9977498c98"
+  integrity sha512-4xKw3tTcCm0qApyT6PqM9qniseCE79xGHiUnNdKGdxNsGUc2X7WwZybqIpnTmoukg3nhPceI5KPNzNqLNeIJww==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.6.0"
+
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.4":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.2.tgz#c3d6e41b304ef10dcf13777a33e7694ec4a9a6dd"