fix: only support es format

This commit is contained in:
Nolan Lawson 2020-06-03 20:12:43 -07:00
parent 359a9f8ba9
commit e7695b7d12
25 changed files with 31 additions and 42 deletions

6
.gitignore vendored
View File

@ -115,5 +115,7 @@ dist
.yarn/build-state.yml
.pnp.*
/dist
/database.js
/database.js.map
/picker.js
/picker.js.map

View File

@ -144,8 +144,8 @@ In general, it's not a problem to create multiple `Database` objects with the sa
If you want to import the `Database` without the `Picker`, or you want to import them separately, then do:
```js
import Picker from 'lite-emoji-picker/dist/es/Picker.js';
import Database from 'lite-emoji-picker/dist/es/Database.js';
import Picker from 'lite-emoji-picker/picker';
import Database from 'lite-emoji-picker/database';
```
The reason for this is that `Picker` automatically registers itself as a custom element, following [web component best practices](https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/). But this adds side effects, so bundlers do not tree-shake as well unless the modules are imported from completely separate files.

3
index.js Normal file
View File

@ -0,0 +1,3 @@
import Picker from './picker.js'
import Database from './database.js'
export { Picker, Database }

View File

@ -2,19 +2,17 @@
"name": "lite-emoji-picker",
"version": "1.0.0",
"description": "Lightweight emoji picker based on IndexedDB",
"main": "dist/cjs/index.js",
"module": "dist/es/index.js",
"main": "index.js",
"module": "index.js",
"type": "module",
"files": [
"dist"
"database.js",
"index.js",
"picker.js"
],
"scripts": {
"build:clean": "rm -fr dist && mkdir -p dist/cjs dist/es",
"build:copy": "cp src/index.cjs.js dist/cjs/index.js && cp src/index.es.js dist/es/index.js",
"build:static": "run-s build:clean build:copy",
"build:rollup": "NODE_ENV=production rollup -c",
"dev:rollup": "NODE_ENV=development rollup -c -w",
"build": "run-s build:static build:rollup",
"dev": "run-s build:static dev:rollup",
"build": "NODE_ENV=production rollup -c",
"dev": "NODE_ENV=development rollup -c -w",
"lint": "standard && stylelint '**/*.scss'",
"lint:fix": "standard --fix && stylelint --fix '**/*.scss'",
"test": "echo \"Error: no test specified\" && exit 1"
@ -60,6 +58,11 @@
"svelte-preprocess": "^3.7.4"
},
"standard": {
"ignore": [
"/database.js",
"/index.js",
"/picker.js"
],
"global": [
"btoa",
"crypto",

View File

@ -21,7 +21,7 @@ const baseConfig = {
'process.env.VERSIONS_AND_TEST_EMOJI': JSON.stringify(versionsAndTestEmoji)
}),
replace({
'../../../database/Database.js': './Database.js',
'../../../database/Database.js': './database.js',
delimiters: ['', '']
}),
svelte({
@ -36,24 +36,23 @@ const baseConfig = {
]
}
const formats = ['es', 'cjs']
const entryPoints = [
{
input: './src/svelte/components/Picker/Picker.svelte',
output: 'Picker.js'
input: './src/picker/components/Picker/Picker.svelte',
output: './picker.js'
},
{
input: './src/database/Database.js',
output: 'Database.js'
output: './database.js'
}
]
export default formats.map(format => (entryPoints.map(({ input, output }) => ({
export default entryPoints.map(({ input, output }) => ({
...baseConfig,
input,
output: {
format,
file: `dist/${format}/${output}`,
format: 'es',
file: output,
sourcemap: dev
}
})))).flat()
}))

View File

@ -1,6 +0,0 @@
// Directly copied into dist/cjs/index.js
Object.defineProperty(exports, '__esModule', { value: true })
exports.Picker = require('./Picker.js')
exports.Database = require('./Database.js')

View File

@ -1,5 +0,0 @@
// Directly copied into dist/es/index.js
import Picker from './Picker.js'
import Database from './Database.js'
export { Picker, Database }

View File

@ -1,7 +0,0 @@
import Picker from './svelte/components/Picker/Picker.svelte'
import { Database } from './database/Database'
export {
Picker,
Database
}

View File

@ -16,7 +16,7 @@
<lite-emoji-picker></lite-emoji-picker>
</div>
<script type="module">
import '../dist/es/index.js'
import '../index.js'
</script>
</body>
</html>