├── .gitignore ├── .idea ├── misc.xml ├── modules.xml ├── nuxt-library-demo.iml └── vcs.xml ├── README.md ├── gulpHelper.js ├── lerna.json ├── package.json ├── packages ├── nuxt-app │ ├── .gitignore │ ├── README.md │ ├── assets │ │ └── README.md │ ├── components │ │ ├── Logo.vue │ │ └── README.md │ ├── layouts │ │ ├── README.md │ │ └── default.vue │ ├── middleware │ │ └── README.md │ ├── nuxt.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── README.md │ │ └── index.vue │ ├── plugins │ │ ├── README.md │ │ └── my-component-library.js │ ├── static │ │ ├── README.md │ │ └── favicon.ico │ └── store │ │ └── README.md └── test-component-lib │ ├── .gitignore │ ├── README.md │ ├── assets │ └── images │ │ └── unknown_user.png │ ├── demo │ ├── Demo.vue │ ├── index.html │ └── main.js │ ├── gulpfile.js │ ├── package-lock.json │ ├── package.json │ ├── shim.d.ts │ ├── src │ ├── components │ │ ├── Test.vue │ │ └── index.ts │ ├── config │ │ └── tailwind.js │ ├── index.ts │ ├── loader.js │ ├── module.ts │ └── styles │ │ ├── _tailwind.scss │ │ └── my-custom-library-base.scss │ ├── tsconfig.json │ ├── types │ └── globals.d.ts │ ├── webpack.base.js │ ├── webpack.config.js │ ├── webpack.demo.config.js │ ├── webpack.lib.client.config.js │ ├── webpack.lib.modern.config.js │ ├── webpack.lib.server.config.js │ └── webpack.module.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | .editorconfig 83 | 84 | # Service worker 85 | sw.* 86 | 87 | # Mac OSX 88 | .DS_Store 89 | 90 | .tmp 91 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/nuxt-library-demo.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxt library demo 2 | 3 | this repo is demonstrates how you can build your own library to use for nuxt. (it's a monorepo with a nuxt app and nuxt library in it) 4 | 5 | I'm using: 6 | * webpack to build a library that can be rendered on server and on client 7 | * tailwind to demonstrate how you can extend your library 8 | * custom assets to export via module 9 | * optimized server side rendering even for stylesheets 10 | 11 | See also https://cmty.app/nuxt/nuxt.js/issues/c9554 12 | 13 | 14 | ## get started 15 | to install needed dependencies 16 | * npm install && npm run bootstrap 17 | 18 | ### build library 19 | npm run build-lib 20 | 21 | ### start nuxt dev server 22 | npm run dev 23 | 24 | # some notes 25 | ### package.json sideEffects 26 | if you set sideEffecs to false, css gets removed. Therefore I added "sideEffects": [ 27 | "*.css", 28 | "*.scss", 29 | "*.vue" 30 | ] 31 | 32 | ### gulp 33 | I'm using gulp to build 3 + 1 module in parallel. I build a modern version, a client version (es5) and a ssr/server version. Futhermore a nuxt module 34 | is built to register assets that your library is using. 35 | 36 | ### the nuxt module 37 | the module is actually a "trick" to automatically register all assets this library exposes. If you do not use nuxt and would like to use a library that has 38 | more assets and they are not packed within webpack than you woudl have to deal with it by yourself. The module approach solve this for you in background. 39 | 40 | I added two subfoldesr in assets "images" (for png,jpg,svg,etc) and fonts (woff2,svg,..etc) to demonstrate this. the fonts directory is empty though, play around with it ;) 41 | 42 | ### demo 43 | there is a demo file included, you can run the library with it by itself. type "npm run dev-lib" to start it. 44 | 45 | ### async components 46 | all components are async exported, check out the componets/index.ts file. 47 | This is the syntax for async components export: "() => import(...);" which allows webpack to split up the bundle in more smaller chunks. 48 | 49 | ### webpack and monorepo. 50 | very important when using a monorepo like this one here, ensure that webpack resolve.symlinks is false. 51 | 52 | ### vue and monoprepo. 53 | beware that a monorepo can install vue in a a lot of different locations (there are more than one node_modules directories). therefore it is 54 | super important to hoist your dependencies (which means all node_modules are installed in the root). 55 | e.g. if you see something like Property or method "_ssrNode" is not defined on the instance but referenced during render. , you probably 56 | have multiple instances of vue lying around. 57 | 58 | ### using you component library within nuxt (step by step): 59 | * add your component as module (nuxt.config.js) 60 | ```js 61 | modules: [ 62 | // load components library as module 63 | path.join(path.dirname(require.resolve('test-component-lib')), '/module') 64 | ] 65 | ``` 66 | * add your componetn as plugin (i know the module could registe a plugin too, I welcome any PR on this ;)) 67 | ```js 68 | plugins: [ 69 | // load components library as plugin 70 | '~/plugins/my-component-library' 71 | ], 72 | ``` 73 | * create the plugin, e.g.: 74 | ~/plugins/my-component-library 75 | ```js 76 | import Vue from 'vue'; 77 | import SharedComponentsPlugin from 'test-component-lib'; 78 | 79 | export default ctx => { 80 | const { app } = ctx; 81 | Vue.use(SharedComponentsPlugin, { 82 | publicPath: process.env.publicPath, 83 | moment: ctx.$moment 84 | }); 85 | }; 86 | ``` 87 | 88 | * use the component like you would do normally: 89 | ```vue 90 | 93 | 94 | 103 | ``` 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /gulpHelper.js: -------------------------------------------------------------------------------- 1 | const WebpackBar = require('webpackbar'); 2 | const webpack = require('webpack'); 3 | const gutil = require("gulp-util"); 4 | 5 | const runWebpack = async (name, webpackConfig) => { 6 | let color; 7 | switch (name) { 8 | case 'server': 9 | color = 'blue'; 10 | break; 11 | case 'modern': 12 | color = 'yellow'; 13 | break; 14 | default: 15 | color = 'green'; 16 | } 17 | 18 | return new Promise((resolve, reject) => { 19 | webpack( 20 | { 21 | ...webpackConfig, 22 | plugins: [ 23 | ...webpackConfig.plugins, 24 | new WebpackBar({ name, color }) 25 | ] 26 | }, 27 | (err, stats) => { 28 | if(err) { 29 | reject(new gutil.PluginError("webpack", err)); 30 | return; 31 | } 32 | gutil.log("[webpack]", stats.toString({ 33 | colors: true 34 | })); 35 | 36 | if (stats.hasErrors()) { 37 | reject(new Error('build failed')); 38 | } else { 39 | resolve(); 40 | } 41 | } 42 | ); 43 | }); 44 | }; 45 | 46 | exports.runWebpack = runWebpack; 47 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "version": "0.0.0" 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "devDependencies": { 5 | "lerna": "^3.16.4", 6 | "gulp": "^4.0.2", 7 | "gulp-util": "^3.0.8" 8 | }, 9 | "scripts": { 10 | "bootstrap": "lerna bootstrap --hoist", 11 | "dev-lib": "cd packages/test-component-lib && npm run dev", 12 | "build-lib": "cd packages/test-component-lib && npm run build", 13 | "dev": "cd packages/nuxt-app && npm run dev" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/nuxt-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | .editorconfig 83 | 84 | # Service worker 85 | sw.* 86 | 87 | # Mac OSX 88 | .DS_Store -------------------------------------------------------------------------------- /packages/nuxt-app/README.md: -------------------------------------------------------------------------------- 1 | # test-nuxt-app 2 | 3 | > My finest Nuxt.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm run install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm run start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /packages/nuxt-app/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /packages/nuxt-app/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | -------------------------------------------------------------------------------- /packages/nuxt-app/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /packages/nuxt-app/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /packages/nuxt-app/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /packages/nuxt-app/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /packages/nuxt-app/nuxt.config.js: -------------------------------------------------------------------------------- 1 | import Fiber from 'fibers'; 2 | import Sass from 'sass'; 3 | import * as path from 'path'; 4 | 5 | const customSass = { 6 | implementation: Sass, 7 | fiber: Fiber 8 | }; 9 | 10 | const publicPath = '/some_random_public_path/'; 11 | 12 | export default { 13 | mode: 'universal', 14 | env: { 15 | publicPath // to know wat the public path is in the plugin 16 | }, 17 | /* 18 | ** Headers of the page 19 | */ 20 | head: { 21 | title: process.env.npm_package_name || '', 22 | meta: [ 23 | { charset: 'utf-8' }, 24 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 25 | { 26 | hid: 'description', 27 | name: 'description', 28 | content: process.env.npm_package_description || '' 29 | } 30 | ], 31 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] 32 | }, 33 | /* 34 | ** Customize the progress-bar color 35 | */ 36 | loading: { color: '#fff' }, 37 | /* 38 | ** Global CSS 39 | */ 40 | css: [], 41 | /* 42 | ** Plugins to load before mounting the App 43 | */ 44 | plugins: [ 45 | // load components library as plugin 46 | '~/plugins/my-component-library' 47 | ], 48 | /* 49 | ** Nuxt.js modules 50 | */ 51 | modules: [ 52 | // load components library as module 53 | path.join(path.dirname(require.resolve('test-component-lib')), '/module') 54 | ], 55 | /* 56 | ** Build configuration 57 | */ 58 | build: { 59 | publicPath, 60 | loaders: { 61 | scss: customSass 62 | }, 63 | // transpile: [/hokifycv-component/], 64 | /* 65 | ** You can extend webpack config here 66 | */ 67 | // extend webpack config 68 | extend(config, { isDev }) { 69 | // do not resolve symlinks 70 | if (isDev) config.resolve.symlinks = false 71 | } 72 | } 73 | }; 74 | -------------------------------------------------------------------------------- /packages/nuxt-app/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-nuxt-app", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "anymatch": { 8 | "version": "3.0.3", 9 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.0.3.tgz", 10 | "integrity": "sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==", 11 | "dev": true, 12 | "requires": { 13 | "normalize-path": "^3.0.0", 14 | "picomatch": "^2.0.4" 15 | } 16 | }, 17 | "big.js": { 18 | "version": "5.2.2", 19 | "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", 20 | "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", 21 | "dev": true 22 | }, 23 | "binary-extensions": { 24 | "version": "2.0.0", 25 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", 26 | "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", 27 | "dev": true 28 | }, 29 | "braces": { 30 | "version": "3.0.2", 31 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 32 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 33 | "dev": true, 34 | "requires": { 35 | "fill-range": "^7.0.1" 36 | } 37 | }, 38 | "chokidar": { 39 | "version": "3.0.2", 40 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.0.2.tgz", 41 | "integrity": "sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==", 42 | "dev": true, 43 | "requires": { 44 | "anymatch": "^3.0.1", 45 | "braces": "^3.0.2", 46 | "fsevents": "^2.0.6", 47 | "glob-parent": "^5.0.0", 48 | "is-binary-path": "^2.1.0", 49 | "is-glob": "^4.0.1", 50 | "normalize-path": "^3.0.0", 51 | "readdirp": "^3.1.1" 52 | } 53 | }, 54 | "clone-deep": { 55 | "version": "2.0.2", 56 | "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-2.0.2.tgz", 57 | "integrity": "sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==", 58 | "dev": true, 59 | "requires": { 60 | "for-own": "^1.0.0", 61 | "is-plain-object": "^2.0.4", 62 | "kind-of": "^6.0.0", 63 | "shallow-clone": "^1.0.0" 64 | } 65 | }, 66 | "emojis-list": { 67 | "version": "2.1.0", 68 | "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", 69 | "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", 70 | "dev": true 71 | }, 72 | "fill-range": { 73 | "version": "7.0.1", 74 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 75 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 76 | "dev": true, 77 | "requires": { 78 | "to-regex-range": "^5.0.1" 79 | } 80 | }, 81 | "for-in": { 82 | "version": "1.0.2", 83 | "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", 84 | "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", 85 | "dev": true 86 | }, 87 | "for-own": { 88 | "version": "1.0.0", 89 | "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz", 90 | "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=", 91 | "dev": true, 92 | "requires": { 93 | "for-in": "^1.0.1" 94 | } 95 | }, 96 | "fsevents": { 97 | "version": "2.0.7", 98 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.7.tgz", 99 | "integrity": "sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==", 100 | "dev": true, 101 | "optional": true 102 | }, 103 | "glob-parent": { 104 | "version": "5.0.0", 105 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz", 106 | "integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==", 107 | "dev": true, 108 | "requires": { 109 | "is-glob": "^4.0.1" 110 | } 111 | }, 112 | "is-binary-path": { 113 | "version": "2.1.0", 114 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 115 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 116 | "dev": true, 117 | "requires": { 118 | "binary-extensions": "^2.0.0" 119 | } 120 | }, 121 | "is-extendable": { 122 | "version": "0.1.1", 123 | "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", 124 | "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=", 125 | "dev": true 126 | }, 127 | "is-extglob": { 128 | "version": "2.1.1", 129 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 130 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 131 | "dev": true 132 | }, 133 | "is-glob": { 134 | "version": "4.0.1", 135 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", 136 | "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", 137 | "dev": true, 138 | "requires": { 139 | "is-extglob": "^2.1.1" 140 | } 141 | }, 142 | "is-number": { 143 | "version": "7.0.0", 144 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 145 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 146 | "dev": true 147 | }, 148 | "is-plain-object": { 149 | "version": "2.0.4", 150 | "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", 151 | "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", 152 | "dev": true, 153 | "requires": { 154 | "isobject": "^3.0.1" 155 | } 156 | }, 157 | "isobject": { 158 | "version": "3.0.1", 159 | "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", 160 | "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", 161 | "dev": true 162 | }, 163 | "kind-of": { 164 | "version": "6.0.2", 165 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", 166 | "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", 167 | "dev": true 168 | }, 169 | "loader-utils": { 170 | "version": "1.2.3", 171 | "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", 172 | "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", 173 | "dev": true, 174 | "requires": { 175 | "big.js": "^5.2.2", 176 | "emojis-list": "^2.0.0", 177 | "json5": "^1.0.1" 178 | }, 179 | "dependencies": { 180 | "json5": { 181 | "version": "1.0.1", 182 | "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", 183 | "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", 184 | "dev": true, 185 | "requires": { 186 | "minimist": "^1.2.0" 187 | } 188 | } 189 | } 190 | }, 191 | "lodash.tail": { 192 | "version": "4.1.1", 193 | "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz", 194 | "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=", 195 | "dev": true 196 | }, 197 | "minimist": { 198 | "version": "1.2.0", 199 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 200 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", 201 | "dev": true 202 | }, 203 | "mixin-object": { 204 | "version": "2.0.1", 205 | "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz", 206 | "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=", 207 | "dev": true, 208 | "requires": { 209 | "for-in": "^0.1.3", 210 | "is-extendable": "^0.1.1" 211 | }, 212 | "dependencies": { 213 | "for-in": { 214 | "version": "0.1.8", 215 | "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz", 216 | "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=", 217 | "dev": true 218 | } 219 | } 220 | }, 221 | "neo-async": { 222 | "version": "2.6.1", 223 | "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz", 224 | "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", 225 | "dev": true 226 | }, 227 | "normalize-path": { 228 | "version": "3.0.0", 229 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 230 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 231 | "dev": true 232 | }, 233 | "picomatch": { 234 | "version": "2.0.7", 235 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz", 236 | "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==", 237 | "dev": true 238 | }, 239 | "readdirp": { 240 | "version": "3.1.1", 241 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.1.1.tgz", 242 | "integrity": "sha512-XXdSXZrQuvqoETj50+JAitxz1UPdt5dupjT6T5nVB+WvjMv2XKYj+s7hPeAVCXvmJrL36O4YYyWlIC3an2ePiQ==", 243 | "dev": true, 244 | "requires": { 245 | "picomatch": "^2.0.4" 246 | } 247 | }, 248 | "sass": { 249 | "version": "1.22.7", 250 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.7.tgz", 251 | "integrity": "sha512-ahREi0AdG7RTovSv14+yd1prQSfIvFcrDpOsth5EQf1+RM7SvOxsSttzNQaFmK1aa/k/3vyYwlYF5l0Xl+6c+g==", 252 | "dev": true, 253 | "requires": { 254 | "chokidar": ">=2.0.0 <4.0.0" 255 | } 256 | }, 257 | "sass-loader": { 258 | "version": "7.1.0", 259 | "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz", 260 | "integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==", 261 | "dev": true, 262 | "requires": { 263 | "clone-deep": "^2.0.1", 264 | "loader-utils": "^1.0.1", 265 | "lodash.tail": "^4.1.1", 266 | "neo-async": "^2.5.0", 267 | "pify": "^3.0.0", 268 | "semver": "^5.5.0" 269 | }, 270 | "dependencies": { 271 | "pify": { 272 | "version": "3.0.0", 273 | "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", 274 | "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", 275 | "dev": true 276 | }, 277 | "semver": { 278 | "version": "5.7.0", 279 | "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", 280 | "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", 281 | "dev": true 282 | } 283 | } 284 | }, 285 | "shallow-clone": { 286 | "version": "1.0.0", 287 | "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-1.0.0.tgz", 288 | "integrity": "sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==", 289 | "dev": true, 290 | "requires": { 291 | "is-extendable": "^0.1.1", 292 | "kind-of": "^5.0.0", 293 | "mixin-object": "^2.0.1" 294 | }, 295 | "dependencies": { 296 | "kind-of": { 297 | "version": "5.1.0", 298 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", 299 | "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", 300 | "dev": true 301 | } 302 | } 303 | }, 304 | "to-regex-range": { 305 | "version": "5.0.1", 306 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 307 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 308 | "dev": true, 309 | "requires": { 310 | "is-number": "^7.0.0" 311 | } 312 | } 313 | } 314 | } 315 | -------------------------------------------------------------------------------- /packages/nuxt-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-nuxt-app", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js Demo to show how you can use your own shared component library", 5 | "private": true, 6 | "author": "simon.tretter@hokify.com", 7 | "scripts": { 8 | "build": "nuxt build", 9 | "dev": "nuxt", 10 | "generate": "nuxt generate", 11 | "start": "nuxt start" 12 | }, 13 | "dependencies": { 14 | "nuxt": "^2.9.1", 15 | "test-component-lib": "^0.1.3" 16 | }, 17 | "devDependencies": { 18 | "fibers": "^4.0.1", 19 | "nodemon": "^1.19.1", 20 | "sass": "^1.22.10", 21 | "sass-loader": "^7.3.1", 22 | "vuetify": "^2.0.10" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/nuxt-app/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /packages/nuxt-app/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | 20 | 52 | -------------------------------------------------------------------------------- /packages/nuxt-app/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /packages/nuxt-app/plugins/my-component-library.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import SharedComponentsPlugin from 'test-component-lib'; 3 | 4 | export default ctx => { 5 | const { app } = ctx; 6 | Vue.use(SharedComponentsPlugin, { 7 | publicPath: process.env.publicPath, 8 | moment: ctx.$moment 9 | }); 10 | }; 11 | -------------------------------------------------------------------------------- /packages/nuxt-app/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /packages/nuxt-app/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simllll/nuxt-library-demo/c3cdceb03956615d0667a913999cc4734ace74c1/packages/nuxt-app/static/favicon.ico -------------------------------------------------------------------------------- /packages/nuxt-app/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /packages/test-component-lib/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simllll/nuxt-library-demo/c3cdceb03956615d0667a913999cc4734ace74c1/packages/test-component-lib/.gitignore -------------------------------------------------------------------------------- /packages/test-component-lib/README.md: -------------------------------------------------------------------------------- 1 | this is a component library that you can use withing a nuxt project. 2 | 3 | it was a lot of work to get this thing running, so maybe you can reference somewhere to hokify.at/hokify.de or just hokify.com 4 | if you can make use of this library demo. 5 | 6 | thanks 7 | 8 | (c) by simon tretter (simon.tretter@hokify.com) 9 | -------------------------------------------------------------------------------- /packages/test-component-lib/assets/images/unknown_user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simllll/nuxt-library-demo/c3cdceb03956615d0667a913999cc4734ace74c1/packages/test-component-lib/assets/images/unknown_user.png -------------------------------------------------------------------------------- /packages/test-component-lib/demo/Demo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | -------------------------------------------------------------------------------- /packages/test-component-lib/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | my-shared-components library 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/test-component-lib/demo/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import * as moment from 'moment'; 3 | import Demo from './Demo.vue'; 4 | import Lib from '../src/index'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | Lib.install(Vue, { 9 | moment, 10 | publicPath: '' 11 | }); 12 | 13 | // eslint-disable-next-line no-new 14 | const vue = new Vue({ 15 | el: '#app', 16 | render: h => h(Demo) 17 | }); 18 | -------------------------------------------------------------------------------- /packages/test-component-lib/gulpfile.js: -------------------------------------------------------------------------------- 1 | const { src, dest, series, parallel, task } = require('gulp'); 2 | const rename = require('gulp-rename'); 3 | const del = require('del'); 4 | const { runWebpack } = require('../../gulpHelper'); 5 | 6 | task('build:lib:client', function() { 7 | return runWebpack('client', require('./webpack.lib.client.config')); 8 | }); 9 | 10 | task('build:lib:modern', function() { 11 | if (!process.env.NODE_ENV) { 12 | console.info('skipping modern build on dev env'); 13 | return Promise.resolve(); 14 | } 15 | 16 | return runWebpack('modern', require('./webpack.lib.modern.config')); 17 | }); 18 | 19 | task('build:lib:server', function() { 20 | return runWebpack('server', require('./webpack.lib.server.config')); 21 | }); 22 | 23 | task('build:module', function() { 24 | return runWebpack('module', require('./webpack.module.config')); 25 | }); 26 | 27 | task('copyEntryFile', function() { 28 | return src('./src/loader.js') 29 | .pipe(rename('./index.js')) 30 | .pipe(dest('dist/', { overwrite: true })); 31 | }); 32 | 33 | const build = series( 34 | parallel('build:lib:client', 'build:lib:server', 'build:lib:modern', 'build:module'), 35 | 'copyEntryFile' 36 | ); 37 | 38 | exports.build = build; 39 | 40 | function clean() { 41 | return del(['./dist']); 42 | } 43 | 44 | exports.clean = clean; 45 | -------------------------------------------------------------------------------- /packages/test-component-lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-component-lib", 3 | "version": "0.0.1", 4 | "private": true, 5 | "main": "dist/index.js", 6 | "files": [ 7 | "dist", 8 | "assets" 9 | ], 10 | "description": "shared component library for nuxt.js with SSR and CSS injection and a lot of other optimizations", 11 | "author": "simon.tretter@hokify.com", 12 | "directories": { 13 | "lib": "dist" 14 | }, 15 | "scripts": { 16 | "build": "gulp build", 17 | "clean": "gulp clean", 18 | "dev": "webpack-dev-server --config ./webpack.demo.config.js", 19 | "prepare": "npm run build" 20 | }, 21 | "sideEffects": [ 22 | "*.css", 23 | "*.scss", 24 | "*.vue" 25 | ], 26 | "types": "dist/index.d.ts", 27 | "dependencies": { 28 | "moment": "^2.24.0", 29 | "vue": "^2.6.10", 30 | "vue-i18n": "^8.14.0", 31 | "vue-property-decorator": "^8.2.1" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.5.5", 35 | "@babel/plugin-proposal-decorators": "^7.4.4", 36 | "@babel/plugin-transform-runtime": "^7.5.5", 37 | "@babel/preset-env": "^7.5.5", 38 | "@fullhuman/postcss-purgecss": "^1.2.0", 39 | "@nuxt/babel-preset-app": "^2.9.1", 40 | "babel-loader": "^8.0.6", 41 | "cache-loader": "^4.1.0", 42 | "css-loader": "^3.2.0", 43 | "cssnano": "^4.1.10", 44 | "file-loader": "^4.2.0", 45 | "gulp": "^4.0.2", 46 | "gulp-rename": "^1.4.0", 47 | "hard-source-webpack-plugin": "^0.13.1", 48 | "lodash-webpack-plugin": "^0.11.5", 49 | "mini-css-extract-plugin": "^0.8.0", 50 | "moment-locales-webpack-plugin": "^1.1.0", 51 | "postcss-loader": "^3.0.0", 52 | "purgecss-webpack-plugin": "^1.5.0", 53 | "sass": "^1.22.10", 54 | "sass-loader": "^7.3.1", 55 | "tailwindcss": "^1.1.2", 56 | "ts-loader": "^6.0.4", 57 | "ts-node": "^8.3.0", 58 | "typescript": "^3.5.3", 59 | "vue-loader": "^15.7.1", 60 | "vue-template-compiler": "^2.6.10", 61 | "webpack": "^4.39.2", 62 | "webpack-bundle-analyzer": "^3.4.1", 63 | "webpack-cleanup-plugin": "^0.5.1", 64 | "webpack-cli": "^3.3.7", 65 | "webpack-dev-server": "^3.8.0", 66 | "webpack-node-externals": "^1.7.2", 67 | "webpackbar": "^4.0.0" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /packages/test-component-lib/shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | 4 | export default Vue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/components/Test.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 33 | 43 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/components/index.ts: -------------------------------------------------------------------------------- 1 | // components 2 | export const Test = () => import('./Test.vue'); 3 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/config/tailwind.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | prefix: 'mcl-', 3 | important: false, 4 | separator: ':', 5 | theme: { 6 | colors: { 7 | 'color-main': '#0fb1af', 8 | 'color-main-hover': '#009896', // 10% darker of main 9 | 10 | 'color-main-business': '#007f7e', 11 | 'color-main-business-hover': '#006665', // 10% darker of main 12 | 13 | 'color-blue': '#2a84e3', 14 | 'color-blue-hover': '#116BCA', // 10% darker of blue 15 | 16 | 'color-white': '#ffffff', 17 | 'color-white-hover': '#f2f2f2', // 10% darker of white 18 | 19 | 'color-yellow': '#fdd408', 20 | 'color-yellow-hover': '#E4BB00', // 10% darker of yellow 21 | 22 | 'color-purple': '#bd2297', 23 | 'color-purple-hover': '#A4097E', // 10% darker of purple 24 | 25 | transparent: 'transparent', 26 | 'color-main-light': '#d9f2f2', 27 | 'color-main-lighter': '#F3FFFF', 28 | 'color-blue-grey': '#334b65', 29 | 'color-grey': '#9a9a9a', 30 | 'color-grey-light': '#d6d6d6', 31 | 'color-grey-lightest': '#f2f2f2', 32 | 'color-text': '#596d83' 33 | }, 34 | container: { 35 | center: true 36 | }, 37 | fontFamily: { 38 | sans: [ 39 | 'system-ui', 40 | 'BlinkMacSystemFont', 41 | '-apple-system', 42 | 'Segoe UI', 43 | 'Roboto', 44 | 'Oxygen', 45 | 'Ubuntu', 46 | 'Cantarell', 47 | 'Fira Sans', 48 | 'Droid Sans', 49 | 'Helvetica Neue', 50 | 'sans-serif' 51 | ], 52 | serif: [ 53 | 'Constantia', 54 | 'Lucida Bright', 55 | 'Lucidabright', 56 | 'Lucida Serif', 57 | 'Lucida', 58 | 'DejaVu Serif', 59 | 'Bitstream Vera Serif', 60 | 'Liberation Serif', 61 | 'Georgia', 62 | 'serif' 63 | ], 64 | mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'] 65 | }, 66 | fontSize: { 67 | '2xs': '0.625rem', // 10px 68 | xs: '.75rem', // 12px 69 | sm: '.875rem', // 14px 70 | base: '1rem', // 16px 71 | lg: '1.125rem', // 18px 72 | xl: '1.25rem', // 20px 73 | '2xl': '1.5rem', // 24px 74 | '3xl': '1.875rem', // 30px 75 | '4xl': '2.25rem', // 36px 76 | '5xl': '3rem' // 48px 77 | }, 78 | borderColor: theme => ({ 79 | ...theme('colors'), 80 | default: theme('colors.gray.300', 'currentColor'), 81 | }), 82 | }, 83 | variants: { 84 | appearance: ['responsive'], 85 | backgroundAttachment: ['responsive'], 86 | backgroundColor: ['responsive', 'hover', 'focus'], 87 | backgroundPosition: ['responsive'], 88 | backgroundRepeat: ['responsive'], 89 | backgroundSize: ['responsive'], 90 | borderCollapse: [], 91 | borderColor: ['responsive', 'hover', 'focus'], 92 | borderRadius: ['responsive'], 93 | borderStyle: ['responsive'], 94 | borderWidth: ['responsive'], 95 | cursor: ['responsive'], 96 | display: ['responsive'], 97 | flexDirection: ['responsive'], 98 | flexWrap: ['responsive'], 99 | alignItems: ['responsive'], 100 | alignSelf: ['responsive'], 101 | justifyContent: ['responsive'], 102 | alignContent: ['responsive'], 103 | flex: ['responsive'], 104 | flexGrow: ['responsive'], 105 | flexShrink: ['responsive'], 106 | float: ['responsive'], 107 | fontFamily: false, 108 | fontWeight: ['responsive', 'hover', 'focus'], 109 | height: ['responsive'], 110 | lineHeight: ['responsive'], 111 | listStylePosition: ['responsive'], 112 | listStyleType: ['responsive'], 113 | margin: ['responsive'], 114 | maxHeight: ['responsive'], 115 | maxWidth: ['responsive'], 116 | minHeight: ['responsive'], 117 | minWidth: ['responsive'], 118 | negativeMargin: ['responsive'], 119 | opacity: ['responsive'], 120 | outline: ['focus'], 121 | overflow: ['responsive'], 122 | padding: ['responsive'], 123 | pointerEvents: ['responsive'], 124 | position: ['responsive'], 125 | inset: ['responsive'], 126 | resize: ['responsive'], 127 | boxShadow: ['responsive', 'hover', 'focus'], 128 | fill: [], 129 | stroke: [], 130 | tableLayout: ['responsive'], 131 | textAlign: ['responsive'], 132 | textColor: ['responsive', 'hover', 'focus'], 133 | fontSize: ['responsive'], 134 | fontStyle: ['responsive', 'hover', 'focus'], 135 | fontSmoothing: ['responsive', 'hover', 'focus'], 136 | textDecoration: ['responsive', 'hover', 'focus'], 137 | textTransform: ['responsive', 'hover', 'focus'], 138 | letterSpacing: ['responsive'], 139 | userSelect: ['responsive'], 140 | verticalAlign: ['responsive'], 141 | visibility: ['responsive'], 142 | whitespace: ['responsive'], 143 | wordBreak: ['responsive'], 144 | width: ['responsive'], 145 | zIndex: ['responsive'] 146 | } 147 | }; 148 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/index.ts: -------------------------------------------------------------------------------- 1 | // components 2 | export * from './components'; 3 | 4 | let installed = false; 5 | 6 | const HokifyCvComponents = { 7 | install: (Vue, params: { moment?: any; publicPath: string }) => { 8 | if (installed) { 9 | console.error('[my-custom-components] already installed'); 10 | return; 11 | } 12 | installed = true; 13 | 14 | if (params.publicPath) { 15 | __webpack_public_path__ = `${params.publicPath}my-custom-components/`; 16 | } 17 | 18 | if (!('$moment' in Vue.prototype) && params.moment) { 19 | Vue.prototype.$moment = params.moment; 20 | } 21 | } 22 | }; 23 | 24 | export default HokifyCvComponents; 25 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/loader.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | if (process.modern && process.env.NODE_ENV) { 3 | module.exports = require('./modern'); 4 | } else if (process.client) { 5 | module.exports = require('./client'); 6 | } else { 7 | module.exports = require('./server'); 8 | } 9 | 10 | module.exports.meta = require('../package.json') 11 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/module.ts: -------------------------------------------------------------------------------- 1 | import * as fs from 'fs'; 2 | import * as path from 'path'; 3 | import * as glob from 'glob'; 4 | 5 | export default function() { 6 | this.options.build.plugins.push({ 7 | apply(compiler) { 8 | compiler.plugin('emit', function module(compilation, cb) { 9 | const assetsRoot = path.resolve(__dirname, '../assets'); 10 | 11 | /** 12 | * register all image assets 13 | */ 14 | const imageAssets = glob.sync(path.join(assetsRoot, './images/**/*.*')); 15 | imageAssets.forEach(assetPath => { 16 | compilation.assets[`my-custom-components/images/${path.basename(assetPath)}`] = { 17 | source: () => fs.readFileSync(assetPath), 18 | size: () => fs.statSync(assetPath).size 19 | }; 20 | }); 21 | 22 | /** 23 | * register all svg assets 24 | */ 25 | const svgAssets = glob.sync(path.join(assetsRoot, './svgs/**/*.*')); 26 | svgAssets.forEach(assetPath => { 27 | compilation.assets[`my-custom-components/svgs/${path.basename(assetPath)}`] = { 28 | source: () => fs.readFileSync(assetPath), 29 | size: () => fs.statSync(assetPath).size 30 | }; 31 | }); 32 | 33 | /** 34 | * register all font assets 35 | */ 36 | const fontAssets = glob.sync(path.join(assetsRoot, './fonts/**/*.*')); 37 | fontAssets.forEach(assetPath => { 38 | compilation.assets[`my-custom-components/fonts/${path.basename(assetPath)}`] = { 39 | source: () => fs.readFileSync(assetPath), 40 | size: () => fs.statSync(assetPath).size 41 | }; 42 | }); 43 | 44 | /** 45 | * register all chunks (client) 46 | */ 47 | const clientAssets = glob.sync(path.join(assetsRoot, '../dist/client/*.*')); 48 | 49 | clientAssets.forEach(assetPath => { 50 | compilation.assets[`my-custom-components/${path.basename(assetPath)}`] = { 51 | source: () => fs.readFileSync(assetPath), 52 | size: () => fs.statSync(assetPath).size 53 | }; 54 | }); 55 | 56 | /** 57 | * register all chunks (modern) 58 | */ 59 | const modernAssets = glob.sync(path.join(assetsRoot, '../dist/modern/*.*')); 60 | 61 | modernAssets.forEach(assetPath => { 62 | compilation.assets[`my-custom-components/${path.basename(assetPath)}`] = { 63 | source: () => fs.readFileSync(assetPath), 64 | size: () => fs.statSync(assetPath).size 65 | }; 66 | }); 67 | 68 | cb(); 69 | }); 70 | } 71 | }); 72 | } 73 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/styles/_tailwind.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * This injects Tailwind's base styles, which is a combination of 3 | * Normalize.css and some additional base styles. 4 | * 5 | * You can see the styles here: 6 | * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css 7 | * 8 | * If using `postcss-import`, you should import this line from it's own file: 9 | * 10 | * @import "./tailwind-preflight.css"; 11 | * 12 | * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622 13 | */ 14 | @tailwind base; 15 | 16 | /** 17 | * Here you would add any of your custom component classes; stuff that you'd 18 | * want loaded *before* the utilities so that the utilities could still 19 | * override them. 20 | * 21 | * Example: 22 | * 23 | * .btn { ... } 24 | * .form-input { ... } 25 | * 26 | * Or if using a preprocessor or `postcss-import`: 27 | * 28 | * @import "components/buttons"; 29 | * @import "components/forms"; 30 | */ 31 | @tailwind components; 32 | 33 | /** 34 | * This injects all of Tailwind's utility classes, generated based on your 35 | * config file. 36 | * 37 | * If using `postcss-import`, you should import this line from it's own file: 38 | * 39 | * @import "./tailwind-utilities.css"; 40 | * 41 | * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622 42 | */ 43 | @tailwind utilities; 44 | 45 | /** 46 | * Here you would add any custom utilities you need that don't come out of the 47 | * box with Tailwind. 48 | * 49 | * Example : 50 | * 51 | * .bg-pattern-graph-paper { ... } 52 | * .skew-45 { ... } 53 | * 54 | * Or if using a preprocessor or `postcss-import`: 55 | * 56 | * @import "utilities/background-patterns"; 57 | * @import "utilities/skew-transforms"; 58 | */ 59 | 60 | ul { 61 | padding: 0; 62 | list-style-type: none; 63 | } 64 | 65 | button:focus { 66 | outline: 0; 67 | } 68 | -------------------------------------------------------------------------------- /packages/test-component-lib/src/styles/my-custom-library-base.scss: -------------------------------------------------------------------------------- 1 | @import 'tailwind'; 2 | -------------------------------------------------------------------------------- /packages/test-component-lib/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "outDir": "./dist" 6 | }, 7 | "include": [ 8 | "./src", 9 | "shim.d.ts", 10 | "./types" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /packages/test-component-lib/types/globals.d.ts: -------------------------------------------------------------------------------- 1 | declare let __webpack_public_path__: string; 2 | -------------------------------------------------------------------------------- /packages/test-component-lib/webpack.base.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable global-require, @typescript-eslint/no-var-requires */ 2 | const path = require('path'); 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin'); 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | const PurgecssPlugin = require('purgecss-webpack-plugin'); 6 | const glob = require('glob'); 7 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 8 | // const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); 9 | const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); 10 | const VUE_VERSION = require('vue/package.json').version; 11 | const VUE_LOADER_VERSION = require('vue-loader/package.json').version; 12 | const WebpackCleanupPlugin = require('webpack-cleanup-plugin'); 13 | const webpackConfig = require('./webpack.config'); 14 | 15 | const CACHE_PATH = '.tmp/cache'; 16 | 17 | const extractCss = false; // false; 18 | 19 | const PATHS = { 20 | src: path.join(__dirname, 'src') 21 | }; 22 | 23 | const purgeCssConfig = { 24 | extractors: [ 25 | { 26 | extractor: class { 27 | static extract(content) { 28 | return content.match(/[A-z0-9-:\\/]+/g) || []; 29 | } 30 | }, 31 | extensions: ['html', 'vue', 'js'] 32 | } 33 | ] 34 | }; 35 | 36 | const plugins = [new VueLoaderPlugin(), new WebpackCleanupPlugin({ quiet: true })]; 37 | 38 | if (extractCss) { 39 | plugins.push( 40 | new MiniCssExtractPlugin({ 41 | filename: 'style.css' 42 | }) 43 | ); 44 | 45 | plugins.push( 46 | new PurgecssPlugin({ 47 | paths: glob.sync(`${PATHS.src}/**/*.vue`), // ['./src/**/*.vue'], 48 | ...purgeCssConfig 49 | }) 50 | ); 51 | } 52 | 53 | // do NOT activate this plugin, it is EVIL 54 | // plugins.push(new HardSourceWebpackPlugin()); 55 | 56 | const config = dest => { 57 | let analyzerPort = 8880; 58 | // eslint-disable-next-line default-case 59 | switch (dest) { 60 | case 'server': 61 | analyzerPort++; 62 | // eslint-disable-next-line no-fallthrough 63 | case 'client': 64 | analyzerPort++; 65 | // eslint-disable-next-line no-fallthrough 66 | case 'modern': 67 | analyzerPort++; 68 | } 69 | /* plugins.push( 70 | new BundleAnalyzerPlugin({ 71 | analyzerPort 72 | }) 73 | ); */ 74 | 75 | return { 76 | ...webpackConfig, 77 | output: { 78 | ...webpackConfig.output, 79 | path: path.resolve(__dirname, `dist/${dest}/`), 80 | chunkFilename: `[name].${dest}.[hash:8].js` 81 | }, 82 | module: { 83 | rules: [ 84 | { 85 | test: /\.vue$/, 86 | loader: 'vue-loader', 87 | options: { 88 | cacheDirectory: path.join(CACHE_PATH, 'vue-loader', dest), 89 | cacheIdentifier: [ 90 | process.env.NODE_ENV || 'development', 91 | // webpack.version, 92 | VUE_VERSION, 93 | VUE_LOADER_VERSION 94 | ].join('|') 95 | } 96 | }, 97 | { 98 | test: /\.(css|scss|sass)$/, 99 | use: [ 100 | extractCss ? MiniCssExtractPlugin.loader : 'vue-style-loader', 101 | { loader: 'css-loader', options: { importLoaders: 1 } }, 102 | { 103 | loader: 'postcss-loader', 104 | options: { 105 | ident: 'postcss', 106 | plugins: extractCss 107 | ? [require('tailwindcss')(`${PATHS.src}/config/tailwind.js`)] 108 | : [ 109 | require('tailwindcss')(`${PATHS.src}/config/tailwind.js`), 110 | require('@fullhuman/postcss-purgecss')({ 111 | content: glob.sync(`${PATHS.src}/**/*.vue`), // ['./src/!**/!*.vue'], 112 | ...purgeCssConfig 113 | }), 114 | require('cssnano')({ 115 | preset: 'default' 116 | }) 117 | ] 118 | } 119 | }, 120 | { 121 | loader: 'sass-loader', 122 | options: { 123 | implementation: require('sass') 124 | } 125 | } 126 | ] 127 | }, 128 | { 129 | test: /\.tsx?$/, 130 | loader: 'ts-loader', 131 | options: { 132 | appendTsSuffixTo: [/\.vue$/] 133 | }, 134 | // include: [path.resolve(__dirname, 'src/')], 135 | exclude: /node_modules/ 136 | }, 137 | { 138 | test: /\.(png|jpg|gif)$/, 139 | loader: 'file-loader', 140 | options: { 141 | name: '[name].[ext]?[hash:8]', 142 | publicPath: 'images', 143 | postTransformPublicPath: p => `__webpack_public_path__ + ${p}`, 144 | limit: Infinity 145 | }, 146 | include: [path.resolve(__dirname, 'assets/images/')] 147 | }, 148 | { 149 | test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, 150 | loader: 'file-loader', 151 | options: { 152 | name: '[name].[ext]?[hash:8]', 153 | publicPath: 'fonts', 154 | postTransformPublicPath: p => `__webpack_public_path__ + ${p}`, 155 | limit: Infinity 156 | }, 157 | include: [path.resolve(__dirname, 'assets/fonts/')] 158 | } 159 | ] 160 | }, 161 | plugins 162 | }; 163 | }; 164 | 165 | // console.log('nodeExternals', nodeExternals()); 166 | module.exports = config; 167 | -------------------------------------------------------------------------------- /packages/test-component-lib/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const externalDependencies = require('./package.json').dependencies; 3 | 4 | module.exports = { 5 | mode: 'production', 6 | output: { 7 | path: path.resolve(__dirname, 'dist/'), 8 | filename: `[name].js`, 9 | libraryTarget: 'commonjs2' 10 | }, 11 | resolve: { 12 | symlinks: false, 13 | alias: { 14 | assets: path.resolve(__dirname, './assets'), 15 | '~assets': path.resolve(__dirname, './assets'), 16 | '~/assets': path.resolve(__dirname, './assets'), 17 | styles: path.resolve(__dirname, './src/styles'), 18 | '~styles': path.resolve(__dirname, './src/styles'), 19 | '~/styles': path.resolve(__dirname, './src/styles'), 20 | '~': path.resolve(__dirname, './src'), 21 | // '~~': path.resolve(__dirname, './'), 22 | '@': path.resolve(__dirname, './src'), 23 | '@@': path.resolve(__dirname, './') 24 | }, 25 | extensions: ['.ts', '.js', '.vue', '.json'] 26 | }, 27 | performance: { 28 | hints: false 29 | }, 30 | externals: [ 31 | { 32 | vue: { 33 | commonjs: 'vue', 34 | commonjs2: 'vue', 35 | amd: 'vue', 36 | root: 'Vue' 37 | } 38 | }, 39 | { 40 | '@hokify/shared-components': { 41 | commonjs: '@hokify/shared-components', 42 | commonjs2: '@hokify/shared-components', 43 | amd: 'hokifySharedComponents', 44 | root: '@hokify/shared-components' 45 | } 46 | }, 47 | ...Object.keys(externalDependencies), 48 | 'moment', 49 | 'axios', 50 | 51 | ], 52 | devtool: 'source-map' 53 | }; 54 | -------------------------------------------------------------------------------- /packages/test-component-lib/webpack.demo.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const webpackClientConfig = require('./webpack.lib.client.config'); 4 | 5 | process.client = true; 6 | 7 | const config = { 8 | ...webpackClientConfig, 9 | mode: 'development', 10 | node: { 11 | // set this to false, we wanna use the dirname of the parent app 12 | __dirname: false, 13 | __filename: false 14 | }, 15 | entry: { 16 | demo: './demo/main.js' 17 | }, 18 | output: { 19 | // publicPath: '_assets', 20 | path: path.resolve(__dirname, 'demo/'), 21 | filename: 'demo.js' 22 | }, 23 | externals: {}, 24 | devServer: { 25 | clientLogLevel: 'trace', 26 | contentBase: [path.join(__dirname, 'demo'), path.join(__dirname, 'dist')], 27 | compress: true, 28 | port: 9000 29 | } 30 | }; 31 | 32 | // console.log('config', config); 33 | 34 | module.exports = config; 35 | -------------------------------------------------------------------------------- /packages/test-component-lib/webpack.lib.client.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | const webpack = require('webpack'); 3 | const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 4 | const webpackConfig = require('./webpack.base')('client'); 5 | 6 | // const x = require('@nuxt/babel-preset-app'); 7 | 8 | const babelOptions = { 9 | presets: [['@nuxt/babel-preset-app', { buildTarget: 'client', modern: false }]], 10 | plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-syntax-dynamic-import'] 11 | }; 12 | 13 | // const babelOptions = x({ buildTarget: 'client', modern: false, modules: 'commonjs' }); 14 | 15 | /* { 16 | presets: [['@nuxt/babel-preset-app', { buildTarget: 'client', modern: false, modules: 'commonjs' }]], 17 | // presets: [['@babel/preset-env', { useBuiltIns: 'entry', corejs: 2 }]], 18 | plugins: [ 19 | '@babel/plugin-proposal-object-rest-spread', 20 | 'lodash' 21 | /* [ 22 | '@babel/plugin-transform-runtime', 23 | { 24 | regenerator: false, 25 | corejs: 2, 26 | helpers: true, 27 | useESModules: true 28 | } 29 | ] 30 | ] 31 | }; */ 32 | 33 | const config = { 34 | ...webpackConfig, 35 | target: 'web', 36 | output: { 37 | ...webpackConfig.output, 38 | libraryTarget: 'umd', 39 | library: 'testSharedLib' 40 | }, 41 | // libraryTarget: 'commonjs2' 42 | // libraryExport: 'default', 43 | // See https://github.com/webpack/webpack/issues/6522 44 | // globalObject: "typeof self !== 'undefined' ? self : this", 45 | // }, 46 | module: { 47 | ...webpackConfig.module, 48 | rules: [ 49 | ...webpackConfig.module.rules.filter(rule => rule.test.toString() !== /\.tsx?$/.toString()), 50 | { 51 | test: /\.tsx?$/, 52 | use: [ 53 | { 54 | loader: 'babel-loader', 55 | options: babelOptions 56 | }, 57 | { 58 | loader: 'ts-loader', 59 | options: { 60 | compilerOptions: { 61 | // target: 'es5' 62 | target: 'esnext' // babel transform to es5 63 | }, 64 | appendTsSuffixTo: [/\.vue$/] 65 | } 66 | } 67 | ], 68 | // include: [path.resolve(__dirname, 'src/')], 69 | exclude: /node_modules|dist/ 70 | }, 71 | { 72 | test: /\.js$/, 73 | use: { 74 | loader: 'babel-loader', 75 | options: babelOptions 76 | }, 77 | exclude: /node_modules|dist/ 78 | // query: { 79 | // presets: [['@babel/env']] 80 | // cacheDirectory: true 81 | // } 82 | }, 83 | { 84 | test: /\.svg$/, 85 | oneOf: [ 86 | { 87 | resourceQuery: /inline/, 88 | use: [ 89 | { 90 | loader: 'babel-loader', 91 | options: babelOptions 92 | /* options: { 93 | presets: ["@babel/preset-env"], 94 | plugins: ["@babel/plugin-proposal-object-rest-spread"] 95 | } */ 96 | }, 97 | { 98 | loader: 'vue-svg-loader', 99 | options: { 100 | svgo: false 101 | } 102 | } 103 | ] 104 | }, 105 | { 106 | resourceQuery: /data/, 107 | loader: 'url-loader' 108 | }, 109 | { 110 | loader: 'file-loader' // By default, always use file-loader 111 | } 112 | ] 113 | } 114 | ] 115 | }, 116 | entry: { 117 | index: './src/index.ts' 118 | }, 119 | plugins: [ 120 | ...webpackConfig.plugins, 121 | new webpack.DefinePlugin({ 122 | 'process.server': false, 123 | 'process.client': true, 124 | 'process.modern': false 125 | }), 126 | new LodashModuleReplacementPlugin() 127 | ] 128 | }; 129 | 130 | // console.log('config', config.module.rules); 131 | 132 | module.exports = config; 133 | -------------------------------------------------------------------------------- /packages/test-component-lib/webpack.lib.modern.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | const webpack = require('webpack'); 3 | const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 4 | const webpackConfig = require('./webpack.base')('modern'); 5 | 6 | const babelOptions = { 7 | presets: [['@nuxt/babel-preset-app', { buildTarget: 'client', modern: true }]], 8 | plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-syntax-dynamic-import'] 9 | }; 10 | 11 | const config = { 12 | ...webpackConfig, 13 | output: { 14 | ...webpackConfig.output, 15 | libraryTarget: 'umd', 16 | library: 'testSharedLib' 17 | }, 18 | module: { 19 | ...webpackConfig.module, 20 | rules: [ 21 | ...webpackConfig.module.rules.filter(rule => rule.test.toString() !== /\.tsx?$/.toString()), 22 | { 23 | test: /\.tsx?$/, 24 | use: [ 25 | { 26 | loader: 'babel-loader', 27 | options: babelOptions 28 | }, 29 | { 30 | loader: 'ts-loader', 31 | options: { 32 | compilerOptions: { 33 | target: 'esnext' // babel transform to "modern" / es7 34 | }, 35 | appendTsSuffixTo: [/\.vue$/] 36 | } 37 | } 38 | ], 39 | // include: [path.resolve(__dirname, 'src/')], 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.js$/, 44 | exclude: /node_modules/, 45 | use: { 46 | loader: 'babel-loader', 47 | options: babelOptions 48 | } 49 | // query: { 50 | // presets: [['@babel/env']] 51 | // cacheDirectory: true 52 | // } 53 | }, 54 | { 55 | test: /\.svg$/, 56 | oneOf: [ 57 | { 58 | resourceQuery: /inline/, 59 | use: [ 60 | { 61 | loader: 'babel-loader', 62 | options: babelOptions 63 | /* options: { 64 | presets: ["@babel/preset-env"], 65 | plugins: ["@babel/plugin-proposal-object-rest-spread"] 66 | } */ 67 | }, 68 | { 69 | loader: 'vue-svg-loader', 70 | options: { 71 | svgo: false 72 | } 73 | } 74 | ] 75 | }, 76 | { 77 | resourceQuery: /data/, 78 | loader: 'url-loader' 79 | }, 80 | { 81 | loader: 'file-loader' // By default, always use file-loader 82 | } 83 | ] 84 | } 85 | ] 86 | }, 87 | entry: { 88 | index: './src/index.ts' 89 | }, 90 | plugins: [ 91 | ...webpackConfig.plugins, 92 | new webpack.DefinePlugin({ 93 | 'process.server': false, 94 | 'process.client': true, 95 | 'process.modern': true 96 | }), 97 | new LodashModuleReplacementPlugin() 98 | ] 99 | }; 100 | 101 | // console.log('config', config.module.rules); 102 | 103 | module.exports = config; 104 | -------------------------------------------------------------------------------- /packages/test-component-lib/webpack.lib.server.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | const webpack = require('webpack'); 3 | const webpackConfig = require('./webpack.base')('server'); 4 | const nodeExternals = require('webpack-node-externals'); 5 | 6 | const config = { 7 | ...webpackConfig, 8 | target: 'node', 9 | entry: { 10 | index: './src/index.ts', 11 | module: './src/module.ts' 12 | }, 13 | plugins: [ 14 | ...webpackConfig.plugins, 15 | new webpack.DefinePlugin({ 16 | 'process.server': true, 17 | 'process.client': false, 18 | 'process.modern': false 19 | }) 20 | ], 21 | externals: [...webpackConfig.externals, nodeExternals()], 22 | module: { 23 | ...webpackConfig.module, 24 | rules: [ 25 | ...webpackConfig.module.rules, 26 | { 27 | test: /\.svg$/, 28 | oneOf: [ 29 | { 30 | resourceQuery: /inline/, 31 | use: [ 32 | { 33 | loader: 'vue-svg-loader', 34 | options: { 35 | svgo: false 36 | } 37 | } 38 | ] 39 | }, 40 | { 41 | resourceQuery: /data/, 42 | loader: 'url-loader' 43 | }, 44 | { 45 | loader: 'file-loader' // By default, always use file-loader 46 | } 47 | ] 48 | } 49 | ] 50 | } 51 | }; 52 | 53 | module.exports = config; 54 | -------------------------------------------------------------------------------- /packages/test-component-lib/webpack.module.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | const path = require('path'); 3 | const nodeExternals = require('webpack-node-externals'); 4 | 5 | const config = { 6 | mode: 'production', 7 | target: 'node', 8 | node: { 9 | // set this to false, we wanna use the dirname of the parent app 10 | __dirname: false, 11 | __filename: false 12 | }, 13 | output: { 14 | path: path.resolve(__dirname, `dist/`), 15 | filename: `[name].js`, 16 | libraryTarget: 'commonjs2' 17 | }, 18 | entry: { 19 | module: './src/module.ts' 20 | }, 21 | plugins: [], 22 | externals: [nodeExternals()] 23 | }; 24 | 25 | // console.log('config', config); 26 | 27 | module.exports = config; 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "incremental": true, 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "declaration": true, 7 | "removeComments": true, 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es2018", 11 | "strictPropertyInitialization": false, 12 | "resolveJsonModule": true, 13 | "sourceMap": true 14 | }, 15 | "exclude": ["**/__tests__"] 16 | } 17 | --------------------------------------------------------------------------------