dev: refactor components to tsx files (#47)

Some benefits:
- Better editor and tooling support
- No need for `h: CreateElement` in any `render()`
- Can format/lint the code
- In the future, can remove usage of `components` if vuejs/vue#9379 is merged
- Use single css classes (copied from tachyons) to style components, since most of the styling can be done with Vuetify, also remove `sass` and `sass-loader`

packages/web/nuxt.config.ts

@@ -1,5 +1,4 @@
 import path from 'path'
-import sass from 'sass'
 
 export const rootDir = __dirname
 
@@ -11,7 +10,7 @@ export const server = {
 
 export const plugins = [path.join(__dirname, 'src/plugins/vuetify.ts')]
 
-export const css = ['vuetify/dist/vuetify.css']
+export const css = ['vuetify/dist/vuetify.css', path.join(__dirname, 'src/assets/common.css')]
 
 export const head = {
   titleTemplate: (title: string): string => {
@@ -38,11 +37,7 @@ export const head = {
 }
 
 export const build = {
-  loaders: {
-    scss: {
-      implementation: sass,
-    },
-  },
+  extractCSS: true,
   extend (config: any) {
     // Allow to mock dependencies
     config.resolve.modules.unshift(path.join(__dirname, 'mock_dependencies'))

packages/web/package.json

@@ -26,10 +26,7 @@
   "devDependencies": {
     "@nuxt/typescript": "^2.5.1",
     "@types/luxon": "^1.11.1",
-    "@types/sass": "^1.16.0",
     "@webok/dev": "^0.0.0",
-    "nuxt": "^2.5.1",
-    "sass": "^1.17.3",
-    "sass-loader": "^7.1.0"
+    "nuxt": "^2.5.1"
   }
 }

packages/web/src/assets/common.css

@@ -0,0 +1,3 @@
+/* https://tachyons.io/docs/typography/text-decoration/ */
+
+.no-underline { text-decoration: none; }

packages/web/src/components/common/datetime.vue → packages/web/src/components/common/datetime.tsx

@@ -1,10 +1,8 @@
-<script lang='tsx'>
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
 import { DateTime } from 'luxon'
 
 @Component({})
-export default class Datetime extends Vue {
+export class Datetime extends Vue {
   @Prop({ type: String, required: true })
   private readonly value!: string
 
@@ -16,7 +14,7 @@ export default class Datetime extends Vue {
     return DateTime.fromISO(this.value).setLocale('en-US').toLocaleString(format)
   }
 
-  render (h: CreateElement) {
+  render () {
     return (
       // Use no-ssr because server does not know client timezone
       <no-ssr>
@@ -26,4 +24,3 @@ export default class Datetime extends Vue {
     )
   }
 }
-</script>

packages/web/src/components/common/external-link.vue → packages/web/src/components/common/external-link.tsx

@@ -1,20 +1,18 @@
-<script lang='tsx'>
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
 
 @Component({})
-export default class ExternalLink extends Vue {
+export class ExternalLink extends Vue {
   @Prop({ type: String, required: true })
   private readonly to!: string
 
   @Prop(String)
   private readonly label!: string
 
-  render (h: CreateElement) {
+  render () {
     return (
       <a
         href={this.to}
-        class='link'
+        class='no-underline'
         target='_blank'
       >
         <v-icon
@@ -25,10 +23,3 @@ export default class ExternalLink extends Vue {
     )
   }
 }
-</script>
-
-<style lang="scss" scoped>
-.link {
-  text-decoration: none;
-}
-</style>

packages/web/src/components/common/form-card.vue → packages/web/src/components/common/form-card.tsx

@@ -1,15 +1,10 @@
-<script lang='tsx'>
 import { Component, Vue } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
 
 @Component({})
-export default class FormCard extends Vue {
-  render (h: CreateElement) {
+export class FormCard extends Vue {
+  render () {
     return (
-      <v-card
-        class="mt-2"
-        raised
-      >
+      <v-card raised>
         <v-card-title
           class='pb-0'
           primary-title
@@ -27,4 +22,3 @@ export default class FormCard extends Vue {
     )
   }
 }
-</script>

packages/web/src/components/common/index.ts

@@ -0,0 +1,4 @@
+export * from './form-card'
+export * from './section-block'
+export * from './external-link'
+export * from './datetime'

packages/web/src/components/common/section-block.vue → packages/web/src/components/common/section-block.tsx

@@ -1,13 +1,11 @@
-<script lang='tsx'>
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
 
 @Component({})
-export default class SectionBlock extends Vue {
+export class SectionBlock extends Vue {
   @Prop({ type: String, required: true })
   private readonly title!: string
 
-  render (h: CreateElement) {
+  render () {
     return (
       <div class='my-2'>
         <strong>{this.title}</strong>
@@ -16,4 +14,3 @@ export default class SectionBlock extends Vue {
     )
   }
 }
-</script>

packages/web/src/components/page/index.ts

@@ -0,0 +1,4 @@
+export * from './page-new-form'
+export * from './page-details'
+export * from './page-edit-form'
+export * from './page-delete-button'

packages/web/src/components/page/page-delete-button.vue → packages/web/src/components/page/page-delete-button.tsx

@@ -1,15 +1,13 @@
-<script lang='tsx'>
 import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
 import { PageDto } from '@webok/core/es6/page'
-import FormCard from '../common/form-card.vue'
+import { FormCard } from '../common'
 
 @Component({
   components: {
     FormCard,
   },
 })
-export default class PageDeleteButton extends Vue {
+export class PageDeleteButton extends Vue {
   @Prop({ type: Object, required: true })
   private readonly pageDto!: PageDto
 
@@ -30,7 +28,7 @@ export default class PageDeleteButton extends Vue {
     this.deletingPage = false
   }
 
-  render (h: CreateElement) {
+  render () {
     return (
       <v-dialog
         value={this.deletingPage}
@@ -47,22 +45,21 @@ export default class PageDeleteButton extends Vue {
             slot='title'
             class='headline'
           >Delete Page</div>
-          <p class="subheading mt-3">
+          <p class='subheading mt-3'>
             Are you sure you want to delete the page '{this.pageDto.name}'?
           </p>
           <template slot='actions'>
-          <v-btn
-            flat
-            on={{ click: this.cancel }}
-          >Cancel</v-btn>
-          <v-btn
-            color='error'
-            on={{ click: this.submit }}
-          >Delete</v-btn>
-        </template>
+            <v-btn
+              flat
+              on={{ click: this.cancel }}
+            >Cancel</v-btn>
+            <v-btn
+              color='error'
+              on={{ click: this.submit }}
+            >Delete</v-btn>
+          </template>
         </form-card>
       </v-dialog>
     )
   }
 }
-</script>

packages/web/src/components/page/page-details.vue → packages/web/src/components/page/page-details.tsx

@@ -1,10 +1,6 @@
-<script lang='tsx'>
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
 import { PageDto } from '@webok/core/es6/page'
-import SectionBlock from '../common/section-block.vue'
-import ExternalLink from '../common/external-link.vue'
-import Datetime from '../common/datetime.vue'
+import { SectionBlock, ExternalLink, Datetime } from '../common'
 
 @Component({
   components: {
@@ -13,11 +9,11 @@ import Datetime from '../common/datetime.vue'
     Datetime,
   },
 })
-export default class PageDetails extends Vue {
+export class PageDetails extends Vue {
   @Prop({ type: Object, required: true })
   private readonly pageDto!: PageDto
 
-  render (h: CreateElement) {
+  render () {
     return (
       <div>
         <section-block title='Name'>
@@ -33,4 +29,3 @@ export default class PageDetails extends Vue {
     )
   }
 }
-</script>