From 25485cf6e4aa92a6680286014e378b8769f701a6 Mon Sep 17 00:00:00 2001
From: Bao D <30614076+baocancode@users.noreply.github.com>
Date: Fri, 5 Apr 2019 22:57:55 +1100
Subject: [PATCH] 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 https://github.com/vuejs/vue/pull/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`
---
 package-lock.json                             | 86 -------------------
 packages/web/nuxt.config.ts                   |  9 +-
 packages/web/package.json                     |  5 +-
 packages/web/src/assets/common.css            |  3 +
 .../common/{datetime.vue => datetime.tsx}     |  7 +-
 .../{external-link.vue => external-link.tsx}  | 15 +---
 .../common/{form-card.vue => form-card.tsx}   | 12 +--
 packages/web/src/components/common/index.ts   |  4 +
 .../{section-block.vue => section-block.tsx}  |  7 +-
 packages/web/src/components/page/index.ts     |  4 +
 ...lete-button.vue => page-delete-button.tsx} | 29 +++----
 .../{page-details.vue => page-details.tsx}    | 11 +--
 ...{page-edit-form.vue => page-edit-form.tsx} | 11 +--
 .../{page-new-form.vue => page-new-form.tsx}  | 11 +--
 .../src/layouts/{default.vue => default.tsx}  |  5 +-
 .../web/src/pages/{index.vue => index.tsx}    |  5 +-
 .../src/pages/pages/{demo.vue => demo.tsx}    | 12 +--
 17 files changed, 54 insertions(+), 182 deletions(-)
 create mode 100644 packages/web/src/assets/common.css
 rename packages/web/src/components/common/{datetime.vue => datetime.tsx} (83%)
 rename packages/web/src/components/common/{external-link.vue => external-link.tsx} (64%)
 rename packages/web/src/components/common/{form-card.vue => form-card.tsx} (69%)
 create mode 100644 packages/web/src/components/common/index.ts
 rename packages/web/src/components/common/{section-block.vue => section-block.tsx} (66%)
 create mode 100644 packages/web/src/components/page/index.ts
 rename packages/web/src/components/page/{page-delete-button.vue => page-delete-button.tsx} (70%)
 rename packages/web/src/components/page/{page-details.vue => page-details.tsx} (69%)
 rename packages/web/src/components/page/{page-edit-form.vue => page-edit-form.tsx} (88%)
 rename packages/web/src/components/page/{page-new-form.vue => page-new-form.tsx} (81%)
 rename packages/web/src/layouts/{default.vue => default.tsx} (66%)
 rename packages/web/src/pages/{index.vue => index.tsx} (84%)
 rename packages/web/src/pages/pages/{demo.vue => demo.tsx} (83%)

diff --git a/package-lock.json b/package-lock.json
index 33b2210..14971bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2597,14 +2597,6 @@
       "resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.28.tgz",
       "integrity": "sha1-a9p9uGU/piZD9e5p6facEaOS46Y="
     },
-    "@types/sass": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz",
-      "integrity": "sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
     "@types/serve-static": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.2.tgz",
@@ -4553,17 +4545,6 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
-    "clone-deep": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-2.0.2.tgz",
-      "integrity": "sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==",
-      "requires": {
-        "for-own": "^1.0.0",
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.0",
-        "shallow-clone": "^1.0.0"
-      }
-    },
     "clone-response": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
@@ -6807,14 +6788,6 @@
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
       "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
     },
-    "for-own": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-      "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-      "requires": {
-        "for-in": "^1.0.1"
-      }
-    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -9818,11 +9791,6 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
-    "lodash.tail": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
-      "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ="
-    },
     "lodash.template": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
@@ -10248,22 +10216,6 @@
         }
       }
     },
-    "mixin-object": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
-      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
-      "requires": {
-        "for-in": "^0.1.3",
-        "is-extendable": "^0.1.1"
-      },
-      "dependencies": {
-        "for-in": {
-          "version": "0.1.8",
-          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
-          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE="
-        }
-      }
-    },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -13169,27 +13121,6 @@
         "walker": "~1.0.5"
       }
     },
-    "sass": {
-      "version": "1.17.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.17.3.tgz",
-      "integrity": "sha512-S4vJawbrNUxJUBiHLXPYUKZCoO6cvq3/3ZFBV66a+PafTxcDEFJB+FHLDFl0P+rUfha/703ajEXMuGTYhJESkQ==",
-      "requires": {
-        "chokidar": "^2.0.0"
-      }
-    },
-    "sass-loader": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
-      "integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==",
-      "requires": {
-        "clone-deep": "^2.0.1",
-        "loader-utils": "^1.0.1",
-        "lodash.tail": "^4.1.1",
-        "neo-async": "^2.5.0",
-        "pify": "^3.0.0",
-        "semver": "^5.5.0"
-      }
-    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -13311,23 +13242,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "shallow-clone": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-1.0.0.tgz",
-      "integrity": "sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==",
-      "requires": {
-        "is-extendable": "^0.1.1",
-        "kind-of": "^5.0.0",
-        "mixin-object": "^2.0.1"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
-        }
-      }
-    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
diff --git a/packages/web/nuxt.config.ts b/packages/web/nuxt.config.ts
index 34127f5..4e32d98 100644
--- a/packages/web/nuxt.config.ts
+++ b/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'))
diff --git a/packages/web/package.json b/packages/web/package.json
index 9b3a737..5bdf123 100644
--- a/packages/web/package.json
+++ b/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"
   }
 }
diff --git a/packages/web/src/assets/common.css b/packages/web/src/assets/common.css
new file mode 100644
index 0000000..40c049a
--- /dev/null
+++ b/packages/web/src/assets/common.css
@@ -0,0 +1,3 @@
+/* https://tachyons.io/docs/typography/text-decoration/ */
+
+.no-underline { text-decoration: none; }
diff --git a/packages/web/src/components/common/datetime.vue b/packages/web/src/components/common/datetime.tsx
similarity index 83%
rename from packages/web/src/components/common/datetime.vue
rename to packages/web/src/components/common/datetime.tsx
index fb74e01..8642cc8 100644
--- a/packages/web/src/components/common/datetime.vue
+++ b/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>
diff --git a/packages/web/src/components/common/external-link.vue b/packages/web/src/components/common/external-link.tsx
similarity index 64%
rename from packages/web/src/components/common/external-link.vue
rename to packages/web/src/components/common/external-link.tsx
index d4d90a6..fa17634 100644
--- a/packages/web/src/components/common/external-link.vue
+++ b/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>
diff --git a/packages/web/src/components/common/form-card.vue b/packages/web/src/components/common/form-card.tsx
similarity index 69%
rename from packages/web/src/components/common/form-card.vue
rename to packages/web/src/components/common/form-card.tsx
index 04928db..03d5c63 100644
--- a/packages/web/src/components/common/form-card.vue
+++ b/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>
diff --git a/packages/web/src/components/common/index.ts b/packages/web/src/components/common/index.ts
new file mode 100644
index 0000000..8a1017c
--- /dev/null
+++ b/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'
diff --git a/packages/web/src/components/common/section-block.vue b/packages/web/src/components/common/section-block.tsx
similarity index 66%
rename from packages/web/src/components/common/section-block.vue
rename to packages/web/src/components/common/section-block.tsx
index 35b4f9c..ee22656 100644
--- a/packages/web/src/components/common/section-block.vue
+++ b/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>
diff --git a/packages/web/src/components/page/index.ts b/packages/web/src/components/page/index.ts
new file mode 100644
index 0000000..6bb049b
--- /dev/null
+++ b/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'
diff --git a/packages/web/src/components/page/page-delete-button.vue b/packages/web/src/components/page/page-delete-button.tsx
similarity index 70%
rename from packages/web/src/components/page/page-delete-button.vue
rename to packages/web/src/components/page/page-delete-button.tsx
index 9a3f0c9..0f88008 100644
--- a/packages/web/src/components/page/page-delete-button.vue
+++ b/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>
diff --git a/packages/web/src/components/page/page-details.vue b/packages/web/src/components/page/page-details.tsx
similarity index 69%
rename from packages/web/src/components/page/page-details.vue
rename to packages/web/src/components/page/page-details.tsx
index 0ec834b..da34bc0 100644
--- a/packages/web/src/components/page/page-details.vue
+++ b/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>
diff --git a/packages/web/src/components/page/page-edit-form.vue b/packages/web/src/components/page/page-edit-form.tsx
similarity index 88%
rename from packages/web/src/components/page/page-edit-form.vue
rename to packages/web/src/components/page/page-edit-form.tsx
index 1dd7efd..353a0fd 100644
--- a/packages/web/src/components/page/page-edit-form.vue
+++ b/packages/web/src/components/page/page-edit-form.tsx
@@ -1,8 +1,6 @@
-<script lang='tsx'>
 import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
 import { PageDto, UpdatePageDto } from '@webok/core/es6/page'
-import FormCard from '../common/form-card.vue'
+import { FormCard } from '../common'
 
 @Component<PageEditForm>({
   components: {
@@ -14,9 +12,9 @@ import FormCard from '../common/form-card.vue'
     return {
       updatePageDto,
     }
-  }
+  },
 })
-export default class PageEditForm extends Vue {
+export class PageEditForm extends Vue {
   @Prop({ type: Object, required: true })
   private readonly pageDto!: PageDto
 
@@ -36,7 +34,7 @@ export default class PageEditForm extends Vue {
   @Emit('cancel')
   private cancel () {}
 
-  render (h: CreateElement) {
+  render () {
     return (
       <form-card>
         <div
@@ -70,4 +68,3 @@ export default class PageEditForm extends Vue {
     )
   }
 }
-</script>
diff --git a/packages/web/src/components/page/page-new-form.vue b/packages/web/src/components/page/page-new-form.tsx
similarity index 81%
rename from packages/web/src/components/page/page-new-form.vue
rename to packages/web/src/components/page/page-new-form.tsx
index 90ae7f4..6442c30 100644
--- a/packages/web/src/components/page/page-new-form.vue
+++ b/packages/web/src/components/page/page-new-form.tsx
@@ -1,15 +1,13 @@
-<script lang='tsx'>
-import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
-import { CreateElement } from 'vue'
+import { Component, Vue, Emit } from 'vue-property-decorator'
 import { CreatePageDto } from '@webok/core/es6/page'
-import FormCard from '../common/form-card.vue'
+import { FormCard } from '../common'
 
 @Component({
   components: {
     FormCard,
   },
 })
-export default class PageNewForm extends Vue {
+export class PageNewForm extends Vue {
   private readonly createPageDto = new CreatePageDto()
 
   @Emit('submit')
@@ -26,7 +24,7 @@ export default class PageNewForm extends Vue {
   @Emit('cancel')
   private cancel () {}
 
-  render (h: CreateElement) {
+  render () {
     return (
       <form-card>
         <div
@@ -60,4 +58,3 @@ export default class PageNewForm extends Vue {
     )
   }
 }
-</script>
diff --git a/packages/web/src/layouts/default.vue b/packages/web/src/layouts/default.tsx
similarity index 66%
rename from packages/web/src/layouts/default.vue
rename to packages/web/src/layouts/default.tsx
index b505954..2f8fc6f 100644
--- a/packages/web/src/layouts/default.vue
+++ b/packages/web/src/layouts/default.tsx
@@ -1,10 +1,8 @@
-<script lang="tsx">
 import { Component, Vue } from 'nuxt-property-decorator'
-import { CreateElement } from 'vue'
 
 @Component({})
 export default class DefaultLayout extends Vue {
-  render (h: CreateElement) {
+  render () {
     return (
       <v-app>
         <nuxt/>
@@ -12,4 +10,3 @@ export default class DefaultLayout extends Vue {
     )
   }
 }
-</script>
diff --git a/packages/web/src/pages/index.vue b/packages/web/src/pages/index.tsx
similarity index 84%
rename from packages/web/src/pages/index.vue
rename to packages/web/src/pages/index.tsx
index 383e37a..8ffd6f6 100644
--- a/packages/web/src/pages/index.vue
+++ b/packages/web/src/pages/index.tsx
@@ -1,6 +1,4 @@
-<script lang="tsx">
 import { Component, Vue } from 'nuxt-property-decorator'
-import { CreateElement } from 'vue'
 import { MetaInfo } from 'vue-meta'
 
 @Component({})
@@ -13,7 +11,7 @@ export default class HomeRoute extends Vue {
     }
   }
 
-  render (h: CreateElement) {
+  render () {
     return (
       <div class='ma-3'>
         <h1 class='display-3'>Welcome to {this.appName}!</h1>
@@ -24,4 +22,3 @@ export default class HomeRoute extends Vue {
     )
   }
 }
-</script>
diff --git a/packages/web/src/pages/pages/demo.vue b/packages/web/src/pages/pages/demo.tsx
similarity index 83%
rename from packages/web/src/pages/pages/demo.vue
rename to packages/web/src/pages/pages/demo.tsx
index 46013e4..65ae093 100644
--- a/packages/web/src/pages/pages/demo.vue
+++ b/packages/web/src/pages/pages/demo.tsx
@@ -1,12 +1,7 @@
-<script lang='tsx'>
 import { Component, Vue } from 'nuxt-property-decorator'
-import { CreateElement } from 'vue'
 import { MetaInfo } from 'vue-meta'
 import { PageDto, CreatePageDto, UpdatePageDto } from '@webok/core/es6/page'
-import PageDetails from '../../components/page/page-details.vue'
-import PageNewForm from '../../components/page/page-new-form.vue'
-import PageEditForm from '../../components/page/page-edit-form.vue'
-import PageDeleteButton from '../../components/page/page-delete-button.vue'
+import { PageDetails, PageNewForm, PageEditForm, PageDeleteButton } from '../../components/page'
 
 @Component({
   components: {
@@ -41,7 +36,7 @@ export default class PagesDemoRoute extends Vue {
     console.log('cancel')
   }
 
-  render (h: CreateElement) {
+  render () {
     return (
       <div class='ma-3'>
         <div class='display-3 mb-4'>Pages Demo</div>
@@ -59,6 +54,7 @@ export default class PagesDemoRoute extends Vue {
         <div class='mb-4'>
           <div class='display-1'>/new</div>
           <page-new-form
+            class='mt-2'
             on={{
               submit: this.createPage,
               cancel: this.cancel,
@@ -68,6 +64,7 @@ export default class PagesDemoRoute extends Vue {
           <div class='display-1'>/:pageId/edit</div>
           <page-edit-form
             page-dto={this.pageDto}
+            class='mt-2'
             on={{
               submit: this.updatePage,
               cancel: this.cancel,
@@ -78,4 +75,3 @@ export default class PagesDemoRoute extends Vue {
     )
   }
 }
-</script>