Skip to content

Commit

Permalink
feat: vue 3 port
Browse files Browse the repository at this point in the history
  • Loading branch information
rkunev committed Jul 29, 2021
1 parent e5cd160 commit 290084e
Show file tree
Hide file tree
Showing 17 changed files with 2,434 additions and 4,212 deletions.
5 changes: 1 addition & 4 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,9 @@ module.exports = {
env: {
node: true,
},
extends: ['plugin:vue/essential', '@vue/prettier'],
extends: ['plugin:vue/vue3-essential'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
};
4 changes: 4 additions & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged
File renamed without changes.
7 changes: 3 additions & 4 deletions public/index.html → index.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>Vue Color Picker</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="module" src="./src/main.js"></script>
</body>
</html>
9 changes: 6 additions & 3 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
module.exports = {
// moduleFileExtensions: ['js', 'vue'],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
},
// allow using absolute import specifiers in test files
// with a webpack-like alias '@/src/ColorPicker.vue'
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
},
snapshotSerializers: ['jest-serializer-vue'],
testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
testEnvironment: 'jsdom',
globals: {
__DEV__: true,
},
testMatch: ['**/tests/unit/**/*.spec.js'],
testURL: 'http://localhost/',
collectCoverage: true,
collectCoverageFrom: ['<rootDir>/src/ColorPicker.vue'],
Expand Down
69 changes: 28 additions & 41 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
{
"name": "@radial-color-picker/vue-color-picker",
"version": "4.0.0",
"version": "5.0.0-alpha.1",
"description": "Radial Color Picker - Vue",
"author": "Rosen Kanev <rkunev@gmail.com>",
"scripts": {
"serve": "vue-cli-service serve --open",
"start": "vite",
"build": "node scripts/build.js",
"test": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"ci": "vue-cli-service test:unit -i --ci -b",
"test": "jest --watch",
"test:ci": "jest -i --ci -b",
"lint": "eslint --ext .js,vue src",
"prepublishOnly": "yarn build",
"bundlesize": "bundlesize",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
"docs:build": "vuepress build docs",
"prepare": "husky install"
},
"main": "dist/vue-color-picker.cjs.js",
"module": "dist/vue-color-picker.esm.js",
"module": "dist/vue-color-picker.es.js",
"unpkg": "dist/vue-color-picker.umd.min.js",
"files": [
"dist",
Expand All @@ -27,37 +27,26 @@
},
"devDependencies": {
"@babel/core": "7.9.6",
"@rollup/plugin-commonjs": "11.1.0",
"@rollup/plugin-node-resolve": "7.1.3",
"@size-limit/file": "5.0.2",
"@vitejs/plugin-vue": "1.2.5",
"@vue/babel-preset-app": "4.3.1",
"@vue/cli-plugin-babel": "4.3.1",
"@vue/cli-plugin-eslint": "4.3.1",
"@vue/cli-plugin-unit-jest": "4.3.1",
"@vue/cli-service": "4.3.1",
"@vue/cli-shared-utils": "4.3.1",
"@vue/eslint-config-prettier": "6.0.0",
"@vue/test-utils": "1.0.2",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "26.0.1",
"bundlesize": "0.18.0",
"@vue/compiler-sfc": "3.1.5",
"@vue/test-utils": "2.0.0-rc.11",
"babel-jest": "26.6.3",
"chalk": "4.1.1",
"cliui": "6.0.0",
"eslint": "7.0.0",
"eslint-plugin-prettier": "3.1.3",
"eslint-plugin-vue": "6.2.2",
"eslint": "7.31.0",
"eslint-plugin-vue": "7.14.0",
"fs-extra": "9.0.0",
"lint-staged": "10.2.2",
"husky": "7.0.1",
"jest": "26.6.3",
"lint-staged": "11.1.1",
"postcss": "7.0.30",
"prettier": "2.0.5",
"rollup": "2.9.1",
"rollup-plugin-babel": "4.4.0",
"rollup-plugin-postcss": "3.1.1",
"rollup-plugin-replace": "2.2.0",
"rollup-plugin-terser": "5.3.0",
"rollup-plugin-vue": "5.1.6",
"vue": "2.6.11",
"vue-server-renderer": "2.6.11",
"vue-template-compiler": "2.6.11",
"size-limit": "5.0.2",
"vite": "2.4.3",
"vue": "3.1.5",
"vue-jest": "5.0.0-alpha.10",
"vuepress": "1.4.1"
},
"peerDependencies": {
Expand All @@ -66,9 +55,6 @@
"contributors": [
"Dennis Dierkes <dierkes@smartsquare.de>"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"homepage": "https://radial-color-picker.github.io/vue-color-picker/",
"keywords": [
"vue",
Expand All @@ -83,17 +69,18 @@
"license": "MIT",
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint"
"yarn eslint",
"yarn prettier --write"
]
},
"bundlesize": [
"size-limit": [
{
"path": "./dist/vue-color-picker.umd.min.js",
"maxSize": "2.8 kB"
"limit": "2.8 kB"
},
{
"path": "./dist/vue-color-picker.min.css",
"maxSize": "1.3 kB"
"limit": "1.4 kB"
}
],
"repository": {
Expand Down
66 changes: 54 additions & 12 deletions scripts/build.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,70 @@
const vue = require('@vitejs/plugin-vue');
const fse = require('fs-extra');
const { log, logWithSpinner, stopSpinner, clearConsole, done, chalk, error } = require('@vue/cli-shared-utils');
const path = require('path');
const { build } = require('vite');
const chalk = require('chalk');
const readline = require('readline');

const { printStats } = require('./print-stats');
const { bundle } = require('./roll');

const fileNameBase = 'vue-color-picker';

const getBuildConfig = ({ formats, minify }) => {
return {
define: {
// @workaround vite replaces process.env.NODE_ENV with 'production' during build
// after dead code elimination is applied the whole if branch is removed
// what we want instead is to remove it only in UMD builds
__DEV__: formats.includes('umd') ? false : 'process.env.NODE_ENV === "development"',
},
logLevel: 'silent',
configFile: false,
plugins: [vue()],
build: {
emptyOutDir: false,
minify,
brotliSize: false,
sourcemap: !!minify,
lib: {
entry: path.resolve(__dirname, '../src/wrapper.js'),
name: 'VueColorPicker',
formats,
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
entryFileNames: `${fileNameBase}.[format].${!!minify ? 'min.js' : 'js'}`,
assetFileNames: `${fileNameBase}.${!!minify ? 'min.[ext]' : '[ext]'}`,
},
},
},
};
};

(async () => {
try {
const start = Date.now();
if (process.stdout.isTTY) {
console.log('\n'.repeat(process.stdout.rows));

await fse.remove('dist');
readline.cursorTo(process.stdout, 0, 0);
readline.clearScreenDown(process.stdout);
}

log();
logWithSpinner('Building for production as library (commonjs, esm, umd, umd-min)...');
await fse.remove('dist');

await bundle();
console.log('Building for production as library (commonjs, es, umd, umd-min)...');

stopSpinner();
clearConsole();
await build(getBuildConfig({ formats: ['es', 'cjs'] }));
await build(getBuildConfig({ formats: ['umd'], minify: false }));
await build(getBuildConfig({ formats: ['umd'], minify: true }));

done(chalk.green(`Compiled successfully in ${Date.now() - start}ms`));
printStats();
} catch (err) {
stopSpinner();
error(err);
console.error('\n' + chalk.red(err.message));
console.error(err.stack);
process.exit(1);
}
})();
12 changes: 6 additions & 6 deletions scripts/print-stats.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const fse = require('fs-extra');
const zlib = require('zlib');
const ui = require('cliui')({ width: 80 });
const { log, chalk } = require('@vue/cli-shared-utils');
const chalk = require('chalk');

const outputDir = 'dist';

Expand All @@ -27,24 +27,24 @@ const printStats = () => {
};
})
.sort((a, b) => {
// move CSS files to be last
if (isCSS(a.name) && isJS(b.name)) return 1;
// move CSS files to be first
if (isCSS(a.name) && isJS(b.name)) return -1;

// otherwise sort alphabetically
return a.name.localeCompare(b.name);
});

ui.div(
makeRow(chalk.cyan.bold('File'), chalk.cyan.bold('Size'), chalk.cyan.bold('Gzipped')) +
makeRow(chalk.whiteBright.bold('File'), chalk.whiteBright.bold('Size'), chalk.whiteBright.bold('Gzipped')) +
`\n\n` +
assets
.map(({ name, size, gzipped }) =>
makeRow(isJS(name) ? chalk.green(name) : chalk.blue(name), size, gzipped)
makeRow(isJS(name) ? chalk.cyan(name) : chalk.magenta(name), size, gzipped)
)
.join(`\n`)
);

log(`\n${ui.toString()}\n\n ${chalk.gray(`Images and other types of assets omitted.`)}\n`);
console.log(`\n${ui.toString()}\n\n ${chalk.gray(`Images and other types of assets omitted.`)}\n`);
};

module.exports.printStats = printStats;
69 changes: 0 additions & 69 deletions scripts/roll.js

This file was deleted.

4 changes: 2 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<color-picker v-bind="color" @input="onInput" />
<color-picker v-bind="color" @input="onInput" variant="persistent" :initiallyCollapsed="true" />
</template>

<script>
import ColorPicker from './ColorPicker';
import ColorPicker from '../src/ColorPicker.vue';
export default {
components: { ColorPicker },
Expand Down

0 comments on commit 290084e

Please sign in to comment.