feat: create and export ssr friendly components

.github/workflows/deploys.yml

@@ -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

README.md

@@ -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

build.sh

@@ -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

package.json

@@ -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",
@@ -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",

ssr-safe-vue.config.js

@@ -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,
+    },
+})