From 5101dc6aae45c5e78179cffedbaa6cadaf596cf1 Mon Sep 17 00:00:00 2001 From: andoshin11 Date: Wed, 30 Jan 2019 04:21:49 +0900 Subject: [PATCH] chore(examples): add tsx example (#4855) --- examples/typescript-tsx/README.md | 1 + .../components/HelloWorld/HelloWorld.tsx | 14 ++++++++++++ .../components/HelloWorld/index.ts | 3 +++ .../components/HelloWorld/styles.css | 4 ++++ .../components/HelloWorld/styles.css.d.ts | 1 + examples/typescript-tsx/nuxt.config.ts | 14 ++++++++++++ examples/typescript-tsx/package.json | 22 +++++++++++++++++++ examples/typescript-tsx/pages/index.tsx | 13 +++++++++++ examples/typescript-tsx/shims-tsx.d.ts | 11 ++++++++++ examples/typescript-tsx/tsconfig.json | 8 +++++++ examples/typescript-tsx/tslint.json | 7 ++++++ 11 files changed, 98 insertions(+) create mode 100644 examples/typescript-tsx/README.md create mode 100644 examples/typescript-tsx/components/HelloWorld/HelloWorld.tsx create mode 100644 examples/typescript-tsx/components/HelloWorld/index.ts create mode 100644 examples/typescript-tsx/components/HelloWorld/styles.css create mode 100644 examples/typescript-tsx/components/HelloWorld/styles.css.d.ts create mode 100644 examples/typescript-tsx/nuxt.config.ts create mode 100644 examples/typescript-tsx/package.json create mode 100644 examples/typescript-tsx/pages/index.tsx create mode 100644 examples/typescript-tsx/shims-tsx.d.ts create mode 100644 examples/typescript-tsx/tsconfig.json create mode 100644 examples/typescript-tsx/tslint.json diff --git a/examples/typescript-tsx/README.md b/examples/typescript-tsx/README.md new file mode 100644 index 0000000000..38953c9511 --- /dev/null +++ b/examples/typescript-tsx/README.md @@ -0,0 +1 @@ +# TSX example diff --git a/examples/typescript-tsx/components/HelloWorld/HelloWorld.tsx b/examples/typescript-tsx/components/HelloWorld/HelloWorld.tsx new file mode 100644 index 0000000000..ae3dc5c485 --- /dev/null +++ b/examples/typescript-tsx/components/HelloWorld/HelloWorld.tsx @@ -0,0 +1,14 @@ +import Vue from 'vue' +import styles from './styles.css' + +export default Vue.extend({ + beforeCreate () { + // Render Inline CSS on SSR + if ((styles as any).__inject__) { + (styles as any).__inject__(this.$ssrContext) + } + }, + render () { + return

Hello world!

+ } +}) diff --git a/examples/typescript-tsx/components/HelloWorld/index.ts b/examples/typescript-tsx/components/HelloWorld/index.ts new file mode 100644 index 0000000000..15483d21b0 --- /dev/null +++ b/examples/typescript-tsx/components/HelloWorld/index.ts @@ -0,0 +1,3 @@ +import HelloWorld from './HelloWorld' + +export default HelloWorld diff --git a/examples/typescript-tsx/components/HelloWorld/styles.css b/examples/typescript-tsx/components/HelloWorld/styles.css new file mode 100644 index 0000000000..18820dbb8d --- /dev/null +++ b/examples/typescript-tsx/components/HelloWorld/styles.css @@ -0,0 +1,4 @@ +.title { + font-style: italic; + color: green; +} diff --git a/examples/typescript-tsx/components/HelloWorld/styles.css.d.ts b/examples/typescript-tsx/components/HelloWorld/styles.css.d.ts new file mode 100644 index 0000000000..59532069e2 --- /dev/null +++ b/examples/typescript-tsx/components/HelloWorld/styles.css.d.ts @@ -0,0 +1 @@ +export const title: string; diff --git a/examples/typescript-tsx/nuxt.config.ts b/examples/typescript-tsx/nuxt.config.ts new file mode 100644 index 0000000000..ab83d37160 --- /dev/null +++ b/examples/typescript-tsx/nuxt.config.ts @@ -0,0 +1,14 @@ +export default { + build: { + loaders: { + vueStyle: { + manualInject: true + }, + css: { + modules: true, + importLoaders: 1, + localIdentName: '[local]_[hash:base64:5]' + } + } + } +} diff --git a/examples/typescript-tsx/package.json b/examples/typescript-tsx/package.json new file mode 100644 index 0000000000..80507973ca --- /dev/null +++ b/examples/typescript-tsx/package.json @@ -0,0 +1,22 @@ +{ + "name": "typescript-tsx", + "private": true, + "version": "1.0.0", + "scripts": { + "dev": "nuxt-ts", + "build": "nuxt-ts build", + "start": "nuxt-ts start", + "generate": "nuxt-ts generate", + "lint": "tslint --project .", + "lint:fix": "tslint --project . --fix", + "post-update": "yarn upgrade --latest", + "watch:css": "tcm components -w" + }, + "dependencies": { + "nuxt-ts": "latest" + }, + "devDependencies": { + "tslint-config-standard": "^8.0.1", + "typed-css-modules": "^0.3.7" + } +} diff --git a/examples/typescript-tsx/pages/index.tsx b/examples/typescript-tsx/pages/index.tsx new file mode 100644 index 0000000000..aa5ea4f55d --- /dev/null +++ b/examples/typescript-tsx/pages/index.tsx @@ -0,0 +1,13 @@ +import Vue from 'vue' +import HelloWorld from '../components/HelloWorld' + +export default Vue.extend({ + name: 'Home', + render () { + return ( +
+ +
+ ) + } +}) diff --git a/examples/typescript-tsx/shims-tsx.d.ts b/examples/typescript-tsx/shims-tsx.d.ts new file mode 100644 index 0000000000..64fc0a8a6d --- /dev/null +++ b/examples/typescript-tsx/shims-tsx.d.ts @@ -0,0 +1,11 @@ +import Vue, { VNode } from 'vue' + +declare global { + namespace JSX { + interface Element extends VNode {} + interface ElementClass extends Vue {} + interface IntrinsicElements { + [elem: string]: any + } + } +} diff --git a/examples/typescript-tsx/tsconfig.json b/examples/typescript-tsx/tsconfig.json new file mode 100644 index 0000000000..fe19900507 --- /dev/null +++ b/examples/typescript-tsx/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "@nuxt/typescript", + "compilerOptions": { + "baseUrl": ".", + "noImplicitThis": true, + "types": ["@types/node", "@nuxt/vue-app"] + } +} diff --git a/examples/typescript-tsx/tslint.json b/examples/typescript-tsx/tslint.json new file mode 100644 index 0000000000..0c17b301f4 --- /dev/null +++ b/examples/typescript-tsx/tslint.json @@ -0,0 +1,7 @@ +{ + "defaultSeverity": "error", + "extends": ["tslint-config-standard"], + "rules": { + "prefer-const": true + } +}