Skip to content

Commit

Permalink
feat: create and export ssr friendly components
Browse files Browse the repository at this point in the history
  • Loading branch information
stfsy committed May 11, 2022
1 parent dd69578 commit 33fd8dd
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 2 deletions.
4 changes: 3 additions & 1 deletion .github/workflows/deploys.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ jobs:
run: npm ci

- name: Build
run: npm run docs:build
run: ./build.sh
env:
NODE_ENV: production

- name: Add version file
run: npm pkg get --json version name > docs/.vuepress/dist/_version.json
Expand Down
21 changes: 20 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,26 @@ Install with npm
```bash
npm install @discue/ui-components
```


## Usage

Import any component from the main export and use it in your template.

```vue
<template>
<NavLink href="#pricing">Go to pricing</NavLink>
</template>
<script setup>
import { NavLink } from '@discue/ui-components'
</script>
```

The list of currently available components can be found at [ui.discue.io](https://ui.discue.io/components/back-to-top.html).

## Service-side Rendering (SSR)
The default export can not be used for SSR apps. That is because some components might carry also inline stlyes. We do however provide the SSR-friendly export `@discue/ui-components`

## Run Tests

To run tests, run the following command
Expand Down
13 changes: 13 additions & 0 deletions build.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
#!/bin/bash

set -e

npm run build-lib-external
VUE_CLI_SERVICE_CONFIG_PATH=ssr-safe-vue.config.js npm run build-lib-external-for-ssr
npm run build-lib-internal
VUE_CLI_SERVICE_CONFIG_PATH=ssr-safe-vue.config.js npm run build-lib-internal-for-ssr
npm run build-types

rm -rf dist/demo.html
rm -rf dist/*/demo.html
rm -rf dist/*/*/demo.html
10 changes: 10 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
"build-types": "vue-tsc --declaration --emitDeclarationOnly",
"build-lib": "npm run build-lib-external && npm run build-lib-internal && rm dist/demo.html && rm dist/*/demo.html",
"build-lib-external": "vue-cli-service build --target lib --name ui src/index.ts",
"build-lib-external-for-ssr": "vue-cli-service build --target lib --name ui --dest dist/ssr src/index.ts",
"build-lib-internal": "vue-cli-service build --target lib --name internal --dest dist/internal src/internal/index.ts",
"build-lib-internal-for-ssr": "vue-cli-service build --target lib --name internal --dest dist/ssr/internal src/internal/index.ts",
"docs:serve": "nodemon --ext md,vue,js,scss --ignore docs/.vuepress/.cache --ignore docs/.vuepress/.temp --watch docs/* --watch styles --watch src/* --exec npm run docs:dev",
"docs:dev": "npm run docs:styles && npx vuepress dev docs",
"docs:build": "npm run docs:styles && vuepress build docs",
Expand All @@ -29,9 +31,17 @@
"import": "./dist/ui.common.js",
"require": "./dist/ui.common.js"
},
"./ssr": {
"import": "./dist/ssr/ui.common.js",
"require": "./dist/ssr/ui.common.js"
},
"./internal": {
"import": "./dist/internal/internal.common.js",
"require": "./dist/internal/internal.common.js"
},
"./ssr/internal": {
"import": "./dist/ssr/internal/internal.common.js",
"require": "./dist/ssr/internal/internal.common.js"
}
},
"types": "./dist/index.d.ts",
Expand Down
20 changes: 20 additions & 0 deletions ssr-safe-vue.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
const { defineConfig } = require('@vue/cli-service')
const { resolve } = require('path')

module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
externals: [
'vue', 'vue-router'
],
resolve: {
symlinks: false,
alias: {
'@': resolve('./src/')
}
}
},
css: {
extract: true,
},
})

0 comments on commit 33fd8dd

Please sign in to comment.