feat(example-project-rollup): add an exmaple project powered by rollup

adobe · Aug 11, 2020 · 975c243 · 975c243
1 parent 499a3a0
commit 975c243
Show file tree

Hide file tree

Showing 11 changed files with 358 additions and 0 deletions.
diff --git a/projects/example-project-rollup/.editorconfig b/projects/example-project-rollup/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/projects/example-project-rollup/.eslintrc.js b/projects/example-project-rollup/.eslintrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'import', 'html'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+  ],
+  rules: {
+    // disable the rule for all files
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'import/named': 'off',
+    'import/no-unresolved': 'off',
+    'import/extensions': ['error', 'always', { ignorePackages: true }],
+  },
+};
diff --git a/projects/example-project-rollup/.gitignore b/projects/example-project-rollup/.gitignore
@@ -0,0 +1,23 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+
+stats.html
diff --git a/projects/example-project-rollup/LICENSE b/projects/example-project-rollup/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 example-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/projects/example-project-rollup/README.md b/projects/example-project-rollup/README.md
@@ -0,0 +1,30 @@
+<p align="center">
+  <img width="200" src="https://open-wc.org/hero.png"></img>
+</p>
+
+## Open-wc Starter App
+
+[![Built with open-wc recommendations](https://img.shields.io/badge/built%20with-open--wc-blue.svg)](https://github.com/open-wc)
+
+## Quickstart
+
+To get started:
+
+```sh
+npm init @open-wc
+# requires node 10 & npm 6 or higher
+```
+
+## Scripts
+
+- `start` runs your app for development, reloading on file changes
+- `start:build` runs your app after it has been built using the build command
+- `build` builds your app and outputs it in your `dist` directory
+- `test` runs your test suite with Karma
+- `lint` runs the linter for your project
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
diff --git a/projects/example-project-rollup/index.html b/projects/example-project-rollup/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <meta name="Description" content="Put your description here." />
+    <base href="/" />
+
+    <title>example-app</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <sp-button variant="primary">Primary</sp-button>
+    <br /><br />
+    <sp-button variant="secondary" quiet>secondary</sp-button>
+    <br /><br />
+    <sp-dropdown>
+      <span slot="label">
+        Select a Country with a very long label, too long in fact
+      </span>
+      <sp-menu>
+        <sp-menu-item>
+          Deselect
+        </sp-menu-item>
+        <sp-menu-item>
+          Select Inverse
+        </sp-menu-item>
+        <sp-menu-item>
+          Feather...
+        </sp-menu-item>
+        <sp-menu-item>
+          Select and Mask...
+        </sp-menu-item>
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-item>
+          Save Selection
+        </sp-menu-item>
+        <sp-menu-item disabled>
+          Make Work Path
+        </sp-menu-item>
+      </sp-menu>
+    </sp-dropdown>
+
+    <script type="module" src="./out-tsc/src/example-app.js"></script>
+  </body>
+</html>
diff --git a/projects/example-project-rollup/package.json b/projects/example-project-rollup/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "example-project-rollup",
+  "private": true,
+  "version": "0.0.1",
+  "description": "An example project that uses the web components and gives an example of how to bundle them minimally with rollup.",
+  "main": "index.js",
+  "scripts": {
+    "lint:eslint": "eslint --ext .ts,.html . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .ts,.html . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.js\" \"**/*.ts\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "echo 'Fake linting..'",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "build": "rimraf dist && yarn build:tsc && rollup -c rollup.config.js",
+    "build:tsc": "tsc && cp src/styles.css out-tsc/src",
+    "start:build": "npm run build && es-dev-server --root-dir dist --app-index index.html --open --compatibility none",
+    "start": "concurrently --kill-others --names tsc,es-dev-server \"npm run tsc:watch\" \"es-dev-server --app-index index.html --node-resolve --open --watch\"",
+    "tsc:watch": "tsc --watch"
+  },
+  "devDependencies": {
+    "eslint": "^6.1.0",
+    "@open-wc/eslint-config": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.20.0",
+    "@typescript-eslint/parser": "^2.20.0",
+    "prettier": "^2.0.4",
+    "eslint-config-prettier": "^6.11.0",
+    "husky": "^1.0.0",
+    "lint-staged": "^10.0.0",
+    "@open-wc/building-rollup": "^1.0.0",
+    "rimraf": "^2.6.3",
+    "rollup": "^2.3.4",
+    "@types/node": "13.11.1",
+    "es-dev-server": "^1.5.0",
+    "typescript": "^3.9.7",
+    "concurrently": "^5.1.0",
+    "tslib": "^1.11.0",
+    "rollup-plugin-visualizer": "^4.0.4",
+    "rollup-plugin-styles": "^3.10.0",
+    "rollup-plugin-commonjs": "^10.1.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "author": "example-app",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@spectrum-web-components/button": "^0.8.3",
+    "@spectrum-web-components/dropdown": "^0.6.3",
+    "@spectrum-web-components/menu": "^0.3.0",
+    "@spectrum-web-components/styles": "^0.6.0"
+  }
+}
diff --git a/projects/example-project-rollup/rollup.config.js b/projects/example-project-rollup/rollup.config.js
@@ -0,0 +1,47 @@
+import merge from 'deepmerge';
+// use createSpaConfig for bundling a Single Page App
+import { createSpaConfig } from '@open-wc/building-rollup';
+import visualizer from 'rollup-plugin-visualizer';
+import styles from 'rollup-plugin-styles';
+
+// use createBasicConfig to do regular JS to JS bundling
+// import { createBasicConfig } from '@open-wc/building-rollup';
+
+const baseConfig = createSpaConfig({
+  // use the outputdir option to modify where files are output
+  // outputDir: 'dist',
+
+  // if you need to support older browsers, such as IE11, set the legacyBuild
+  // option to generate an additional build just for this browser
+  // legacyBuild: true,
+
+  // development mode creates a non-minified build for debugging or development
+  developmentMode: process.env.ROLLUP_WATCH === 'true',
+
+  // set to true to inject the service worker registration into your index.html
+  injectServiceWorker: false,
+});
+
+export default merge(baseConfig, {
+  // if you use createSpaConfig, you can use your index.html as entrypoint,
+  // any <script type="module"> inside will be bundled by rollup
+  input: './index.html',
+
+  // alternatively, you can use your JS as entrypoint for rollup and
+  // optionally set a HTML template manually
+  // input: './app.js',
+
+  plugins: [
+    styles({
+      mode: 'extract',
+    }),
+    visualizer({
+      brotliSize: true,
+      gzipSize: true,
+    }),
+  ],
+
+  moduleContext: {
+    [require.resolve('focus-visible')]: 'window',
+  },
+});
diff --git a/projects/example-project-rollup/src/example-app.ts b/projects/example-project-rollup/src/example-app.ts
@@ -0,0 +1,37 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+// import our stylesheets
+import './styles.css';
+
+// import the components we'll use in this page
+import '@spectrum-web-components/button/sp-button';
+import '@spectrum-web-components/dropdown/sp-dropdown';
+import '@spectrum-web-components/menu/sp-menu';
+import '@spectrum-web-components/menu/sp-menu-item';
+
+// While https://github.com/open-wc/open-wc/issues/1210 and
+// go https://github.com/popperjs/popper-core/issues/933 persist
+// without an acceptable outcome, this allows the built storybook
+// to function with `process.env.NODE_ENV`... :/
+window.process = window.process || {};
+window.process.env = window.process.env || {};
+window.process.env.NODE_ENV = window.process.env.NODE_ENV || 'production';
+
+/**
+ * Uncomment this following line to allow rollup to include dynamically
+ * imported code whereever it thinks it should best be bundled. In particular,
+ * @open-wc/building-rollup currently uses a babel feature that will still split
+ * this into more than a single bundle.
+ * https://github.com/open-wc/open-wc/issues/1625#issuecomment-632158102
+ **/
+// export { Overlay } from '@spectrum-web-components/overlay';
diff --git a/projects/example-project-rollup/src/styles.css b/projects/example-project-rollup/src/styles.css
@@ -0,0 +1,22 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/* import the global stylesheets */
+@import '@spectrum-web-components/styles/all-medium-light.css';
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-color: #ededed;
+}
diff --git a/projects/example-project-rollup/tsconfig.json b/projects/example-project-rollup/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom", "dom.iterable"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "out-tsc",
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "inlineSources": true,
+    "rootDir": "./"
+  },
+  "include": ["**/*.ts"]
+}