├── .gitignore ├── ember ├── vendor │ └── .gitkeep ├── app │ ├── helpers │ │ └── .gitkeep │ ├── models │ │ └── .gitkeep │ ├── routes │ │ └── .gitkeep │ ├── styles │ │ └── app.css │ ├── components │ │ └── .gitkeep │ ├── controllers │ │ └── .gitkeep │ ├── router.js │ ├── initializers │ │ └── calcite-components.js │ ├── app.js │ ├── templates │ │ └── application.hbs │ └── index.html ├── tests │ ├── unit │ │ ├── .gitkeep │ │ └── initializers │ │ │ └── calcite-components-test.js │ ├── integration │ │ └── .gitkeep │ ├── test-helper.js │ ├── index.html │ └── helpers │ │ └── index.js ├── .watchmanconfig ├── public │ └── robots.txt ├── .template-lintrc.js ├── .vscode │ └── settings.json ├── config │ ├── optional-features.json │ ├── targets.js │ ├── ember-cli-update.json │ └── environment.js ├── .eslintignore ├── .prettierignore ├── .ember-cli ├── .gitignore ├── testem.js ├── ember-cli-build.js ├── .eslintrc.js ├── package.json └── README.md ├── vite ├── public │ └── .gitkeep ├── .gitignore ├── style.css ├── .vscode │ └── settings.json ├── package.json ├── vite.config.js ├── index.html ├── main.js ├── favicon.svg └── README.md ├── web-dev-server ├── .gitignore ├── .vscode │ └── settings.json ├── package.json ├── README.md └── src │ └── index.html ├── webpack ├── .gitignore ├── .vscode │ └── settings.json ├── src │ ├── index.html │ └── index.js ├── package.json ├── webpack.config.js └── README.md ├── common-patterns ├── .gitignore ├── package.json └── src │ ├── index.css │ ├── index.html │ └── components │ ├── slider.html │ └── flow.html ├── react ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .vscode │ └── settings.json ├── src │ ├── setupTests.js │ ├── index.css │ ├── reportWebVitals.js │ ├── App.test.js │ ├── index.js │ ├── App.css │ ├── App.js │ ├── logo.svg │ └── serviceWorker.js ├── .gitignore ├── package.json └── README.md ├── vue ├── public │ └── favicon.ico ├── .vscode │ ├── extensions.json │ └── settings.json ├── src │ ├── main.js │ ├── assets │ │ ├── logo.svg │ │ ├── main.css │ │ └── base.css │ ├── components │ │ ├── icons │ │ │ ├── IconSupport.vue │ │ │ ├── IconTooling.vue │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ └── IconEcosystem.vue │ │ ├── HelloWorld.vue │ │ ├── WelcomeItem.vue │ │ └── TheWelcome.vue │ └── App.vue ├── vite.config.js ├── index.html ├── .gitignore ├── package.json └── README.md ├── angular ├── src │ ├── favicon.ico │ ├── app │ │ ├── app.component.css │ │ ├── app.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ └── app.component.spec.ts │ ├── styles.css │ ├── main.ts │ └── index.html ├── tsconfig.app.json ├── tsconfig.spec.json ├── .gitignore ├── tsconfig.json ├── package.json ├── angular.json └── README.md ├── rollup ├── .gitignore ├── .vscode │ └── settings.json ├── src │ └── main.js ├── public │ └── index.html ├── package.json ├── rollup.config.js └── README.md ├── preact-typescript ├── src │ ├── assets │ │ ├── favicon.ico │ │ └── icons │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── mstile-150x150.png │ │ │ ├── android-chrome-192x192.png │ │ │ └── android-chrome-512x512.png │ ├── declaration.d.ts │ ├── sw.js │ ├── index.ts │ ├── manifest.json │ ├── template.html │ ├── components │ │ ├── app.tsx │ │ └── header │ │ │ ├── index.tsx │ │ │ └── style.css │ ├── style │ │ └── index.css │ └── routes │ │ ├── profile │ │ └── index.tsx │ │ └── home │ │ ├── index.tsx │ │ └── style.css ├── .gitignore ├── .vscode │ └── settings.json ├── tests │ ├── __mocks__ │ │ ├── setupTests.ts │ │ ├── fileMocks.ts │ │ └── browserMocks.ts │ ├── declarations.d.ts │ └── header.test.tsx ├── README.md ├── tsconfig.json ├── package.json └── size-plugin.json ├── .prettierrc.json ├── .github ├── ISSUE_TEMPLATE │ └── config.yml ├── workflows │ └── bump-examples.yml └── scripts │ └── bump-examples.js ├── LICENSE.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/* -------------------------------------------------------------------------------- /ember/vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite/public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/app/helpers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/app/models/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/app/routes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/app/styles/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/tests/unit/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/app/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/app/controllers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ember/tests/integration/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web-dev-server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /webpack/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /common-patterns/.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | /node_modules -------------------------------------------------------------------------------- /ember/.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp", "dist"] 3 | } 4 | -------------------------------------------------------------------------------- /ember/public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /vite/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | public/assets/* 7 | -------------------------------------------------------------------------------- /ember/.template-lintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | extends: 'recommended', 5 | }; 6 | -------------------------------------------------------------------------------- /vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/vue/public/favicon.ico -------------------------------------------------------------------------------- /angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/angular/src/favicon.ico -------------------------------------------------------------------------------- /react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/react/public/favicon.ico -------------------------------------------------------------------------------- /react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/react/public/logo192.png -------------------------------------------------------------------------------- /react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/react/public/logo512.png -------------------------------------------------------------------------------- /vite/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | width: 100%; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | -------------------------------------------------------------------------------- /vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /rollup/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | package-lock.json 4 | public/assets/ 5 | public/*.js 6 | public/*.js.map 7 | -------------------------------------------------------------------------------- /angular/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | size: 20px; 3 | } 4 | 5 | calcite-icon { 6 | --calcite-ui-icon-color: #ffe135; 7 | } 8 | -------------------------------------------------------------------------------- /preact-typescript/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/preact-typescript/src/assets/favicon.ico -------------------------------------------------------------------------------- /preact-typescript/src/declaration.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' { 2 | const mapping: Record; 3 | export default mapping; 4 | } 5 | -------------------------------------------------------------------------------- /ember/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /react/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vite/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /preact-typescript/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /build 3 | /*.log 4 | src/assets 5 | !src/assets/icons 6 | !src/assets/favicon.ico 7 | !src/assets/preact* 8 | -------------------------------------------------------------------------------- /rollup/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /webpack/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /preact-typescript/src/sw.js: -------------------------------------------------------------------------------- 1 | import { getFiles, setupPrecaching, setupRouting } from 'preact-cli/sw/'; 2 | 3 | setupRouting(); 4 | setupPrecaching(getFiles()); 5 | -------------------------------------------------------------------------------- /web-dev-server/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /preact-typescript/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /preact-typescript/src/assets/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/preact-typescript/src/assets/icons/favicon-16x16.png -------------------------------------------------------------------------------- /preact-typescript/src/assets/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/preact-typescript/src/assets/icons/favicon-32x32.png -------------------------------------------------------------------------------- /preact-typescript/src/assets/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/preact-typescript/src/assets/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /preact-typescript/src/assets/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/preact-typescript/src/assets/icons/mstile-150x150.png -------------------------------------------------------------------------------- /preact-typescript/src/assets/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/preact-typescript/src/assets/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /preact-typescript/src/assets/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/calcite-components-examples/HEAD/preact-typescript/src/assets/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /preact-typescript/tests/__mocks__/setupTests.ts: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-preact-pure'; 3 | 4 | configure({ 5 | adapter: new Adapter() 6 | }); 7 | -------------------------------------------------------------------------------- /ember/config/optional-features.json: -------------------------------------------------------------------------------- 1 | { 2 | "application-template-wrapper": false, 3 | "default-async-observers": true, 4 | "jquery-integration": false, 5 | "template-only-glimmer-components": true 6 | } 7 | -------------------------------------------------------------------------------- /angular/src/styles.css: -------------------------------------------------------------------------------- 1 | @import "@esri/calcite-components/dist/calcite/calcite.css"; 2 | 3 | html, 4 | body { 5 | height: 100%; 6 | width: 100%; 7 | background-color: var(--calcite-ui-foreground-2); 8 | } 9 | -------------------------------------------------------------------------------- /ember/config/targets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const browsers = [ 4 | 'last 1 Chrome versions', 5 | 'last 1 Firefox versions', 6 | 'last 1 Safari versions', 7 | ]; 8 | 9 | module.exports = { 10 | browsers, 11 | }; 12 | -------------------------------------------------------------------------------- /vue/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 3 | import App from './App.vue'; 4 | 5 | setAssetPath(location.href); 6 | 7 | createApp(App).mount('#app'); 8 | -------------------------------------------------------------------------------- /preact-typescript/tests/declarations.d.ts: -------------------------------------------------------------------------------- 1 | // Enable enzyme adapter's integration with TypeScript 2 | // See: https://github.com/preactjs/enzyme-adapter-preact-pure#usage-with-typescript 3 | /// 4 | -------------------------------------------------------------------------------- /preact-typescript/tests/__mocks__/fileMocks.ts: -------------------------------------------------------------------------------- 1 | // This fixed an error related to the CSS and loading gif breaking my Jest test 2 | // See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets 3 | export default 'test-file-stub'; 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSameLine": false, 4 | "bracketSpacing": true, 5 | "printWidth": 80, 6 | "semi": true, 7 | "singleQuote": true, 8 | "tabWidth": 2, 9 | "trailingComma": "none", 10 | "useTabs": false 11 | } 12 | -------------------------------------------------------------------------------- /react/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /ember/app/router.js: -------------------------------------------------------------------------------- 1 | import EmberRouter from '@ember/routing/router'; 2 | import config from 'ember4/config/environment'; 3 | 4 | export default class Router extends EmberRouter { 5 | location = config.locationType; 6 | rootURL = config.rootURL; 7 | } 8 | 9 | Router.map(function () {}); 10 | -------------------------------------------------------------------------------- /angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /ember/app/initializers/calcite-components.js: -------------------------------------------------------------------------------- 1 | import { defineCustomElements } from '@esri/calcite-components/dist/loader'; 2 | 3 | defineCustomElements(window, { 4 | resourcesUrl: 'assets/calcite/', 5 | }); 6 | 7 | export function initialize(/* application */) {} 8 | 9 | export default { 10 | initialize, 11 | }; 12 | -------------------------------------------------------------------------------- /vue/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /preact-typescript/src/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.css'; 2 | import App from './components/app'; 3 | import '@esri/calcite-components/dist/calcite/calcite.css'; 4 | import '@esri/calcite-components'; 5 | import { defineCustomElements } from '@esri/calcite-components/dist/loader'; 6 | 7 | defineCustomElements(window); 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /vue/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url'; 2 | 3 | import { defineConfig } from 'vite'; 4 | import vue from '@vitejs/plugin-vue'; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [vue()], 9 | resolve: { 10 | alias: { 11 | '@': fileURLToPath(new URL('./src', import.meta.url)) 12 | } 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-vite-starter", 3 | "private": true, 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "serve": "vite preview" 8 | }, 9 | "devDependencies": { 10 | "vite": "^4.0.4", 11 | "vite-plugin-static-copy": "^0.17.0" 12 | }, 13 | "dependencies": { 14 | "@esri/calcite-components": "^2.1.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /vue/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /ember/tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import Application from 'ember4/app'; 2 | import config from 'ember4/config/environment'; 3 | import * as QUnit from 'qunit'; 4 | import { setApplication } from '@ember/test-helpers'; 5 | import { setup } from 'qunit-dom'; 6 | import { start } from 'ember-qunit'; 7 | 8 | setApplication(Application.create(config.APP)); 9 | 10 | setup(QUnit.assert); 11 | 12 | start(); 13 | -------------------------------------------------------------------------------- /vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /rollup/src/main.js: -------------------------------------------------------------------------------- 1 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 2 | import '@esri/calcite-components/dist/components/calcite-button'; 3 | import '@esri/calcite-components/dist/components/calcite-icon'; 4 | import '@esri/calcite-components/dist/components/calcite-date-picker'; 5 | import '@esri/calcite-components/dist/calcite/calcite.css'; 6 | 7 | setAssetPath(document.currentScript.src); 8 | -------------------------------------------------------------------------------- /angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 2 | import { AppModule } from "./app/app.module"; 3 | import { defineCustomElements } from "@esri/calcite-components/dist/loader"; 4 | 5 | defineCustomElements(window, { resourcesUrl: "./assets" }); 6 | 7 | platformBrowserDynamic() 8 | .bootstrapModule(AppModule) 9 | .catch((error: Error) => console.error(error)); 10 | -------------------------------------------------------------------------------- /angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calcite Components Angular Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /webpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Webpack Config 7 | 8 | 9 |

Calcite Webpack

10 |
11 | Button 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine", 8 | "@esri/calcite-components", 9 | "@esri/calcite-components-angular" 10 | ] 11 | }, 12 | "include": [ 13 | "src/**/*.spec.ts", 14 | "src/**/*.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | /public/assets/ 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /ember/app/app.js: -------------------------------------------------------------------------------- 1 | import Application from '@ember/application'; 2 | import Resolver from 'ember-resolver'; 3 | import loadInitializers from 'ember-load-initializers'; 4 | import config from 'ember4/config/environment'; 5 | 6 | export default class App extends Application { 7 | modulePrefix = config.modulePrefix; 8 | podModulePrefix = config.podModulePrefix; 9 | Resolver = Resolver; 10 | } 11 | 12 | loadInitializers(App, config.modulePrefix); 13 | -------------------------------------------------------------------------------- /web-dev-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-web-dev-server-starter", 3 | "private": true, 4 | "main": "index.js", 5 | "scripts": { 6 | "start": "npx web-dev-server --open /src/ --node-resolve --watch", 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "devDependencies": { 10 | "@web/dev-server": "^0.1.35" 11 | }, 12 | "dependencies": { 13 | "@esri/calcite-components": "^2.1.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /ember/.eslintignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .*/ 17 | .eslintcache 18 | 19 | # ember-try 20 | /.node_modules.ember-try/ 21 | /bower.json.ember-try 22 | /npm-shrinkwrap.json.ember-try 23 | /package.json.ember-try 24 | /package-lock.json.ember-try 25 | /yarn.lock.ember-try 26 | -------------------------------------------------------------------------------- /angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { CalciteComponentsModule } from '@esri/calcite-components-angular'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | imports: [BrowserModule, CalciteComponentsModule], 9 | providers: [], 10 | bootstrap: [AppComponent] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /ember/.prettierignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .eslintcache 17 | .lint-todo/ 18 | 19 | # ember-try 20 | /.node_modules.ember-try/ 21 | /bower.json.ember-try 22 | /npm-shrinkwrap.json.ember-try 23 | /package.json.ember-try 24 | /package-lock.json.ember-try 25 | /yarn.lock.ember-try 26 | -------------------------------------------------------------------------------- /rollup/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | rollup-starter-app 7 | 8 | 9 |

rollup-starter-app

10 | 11 | My Button 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /vue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | public/assets 18 | 19 | /cypress/videos/ 20 | /cypress/screenshots/ 21 | 22 | # Editor directories and files 23 | .vscode/* 24 | !.vscode/extensions.json 25 | !.vscode/settings.json 26 | .idea 27 | *.suo 28 | *.ntvs* 29 | *.njsproj 30 | *.sln 31 | *.sw? 32 | -------------------------------------------------------------------------------- /web-dev-server/README.md: -------------------------------------------------------------------------------- 1 | # Calcite Components with Modern Web Dev Server 2 | 3 | ## Project setup 4 | 5 | To install dependencies, run: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | After installation, you can use `npm start` to start up a development server. The development server utilizes the `watch` and `node-resolve` options by default. 12 | 13 | For full API documentation and additional options visit the `web-dev-server` [documentation](https://modern-web.dev/docs/dev-server/overview/) 14 | -------------------------------------------------------------------------------- /preact-typescript/tests/header.test.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import Header from '../src/components/header'; 3 | // See: https://github.com/preactjs/enzyme-adapter-preact-pure 4 | import { shallow } from 'enzyme'; 5 | 6 | describe('Initial Test of the Header', () => { 7 | test('Header renders 3 nav items', () => { 8 | const context = shallow(
); 9 | expect(context.find('h1').text()).toBe('Preact App'); 10 | expect(context.find('Link').length).toBe(3); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /ember/config/ember-cli-update.json: -------------------------------------------------------------------------------- 1 | { 2 | "schemaVersion": "1.0.0", 3 | "packages": [ 4 | { 5 | "name": "ember-cli", 6 | "version": "4.3.0", 7 | "blueprints": [ 8 | { 9 | "name": "app", 10 | "outputRepo": "https://github.com/ember-cli/ember-new-output", 11 | "codemodsSource": "ember-app-codemods-manifest@1", 12 | "isBaseBlueprint": true, 13 | "options": ["--ci-provider=github"] 14 | } 15 | ] 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /common-patterns/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-common-patterns", 3 | "private": true, 4 | "description": "Common workflow patterns using calcite components", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "npx web-dev-server --open /src/ --node-resolve --watch" 9 | }, 10 | "dependencies": { 11 | "@esri/calcite-components": "^2.1.0" 12 | }, 13 | "devDependencies": { 14 | "@web/dev-server": "^0.4.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen, fireEvent } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders hello react text', () => { 5 | render(); 6 | const linkElement = screen.getByText(/Hello, react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | 10 | test('button resets slider value', () => { 11 | render(); 12 | const button = screen.queryByText(/Reset/); 13 | fireEvent.click(button); 14 | expect(screen.queryByText(/50/)).toBeNull(); 15 | }); 16 | -------------------------------------------------------------------------------- /webpack/src/index.js: -------------------------------------------------------------------------------- 1 | import '@esri/calcite-components/dist/components/calcite-button'; 2 | import '@esri/calcite-components/dist/components/calcite-icon'; 3 | import '@esri/calcite-components/dist/components/calcite-date-picker'; 4 | import '@esri/calcite-components/dist/calcite/calcite.css'; 5 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 6 | 7 | setAssetPath(location.href); 8 | 9 | document.getElementById('test').innerHTML = 10 | '
'; 11 | -------------------------------------------------------------------------------- /common-patterns/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('./styles/shared.css'); 2 | 3 | .home { 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | padding: 1rem; 9 | gap: 1rem; 10 | } 11 | 12 | .header { 13 | font-size: 1.2rem; 14 | font-weight: 500; 15 | color: #9f9f9f; 16 | } 17 | 18 | .component-list { 19 | display: grid; 20 | grid-template-columns: 1fr 1fr 1fr 1fr; 21 | gap: 1rem; 22 | width: 100%; 23 | } 24 | 25 | .component-link { 26 | text-decoration: none; 27 | } 28 | -------------------------------------------------------------------------------- /web-dev-server/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 | 16 | button 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /preact-typescript/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "preact_new", 3 | "short_name": "preact_new", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "orientation": "portrait", 7 | "background_color": "#fff", 8 | "theme_color": "#673ab8", 9 | "icons": [ 10 | { 11 | "src": "/assets/icons/android-chrome-192x192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "/assets/icons/android-chrome-512x512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /vite/vite.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from 'node:path'; 2 | import { defineConfig } from 'vite'; 3 | import { viteStaticCopy } from 'vite-plugin-static-copy'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | viteStaticCopy({ 8 | targets: [ 9 | { 10 | src: resolve( 11 | 'node_modules', 12 | '@esri', 13 | 'calcite-components', 14 | 'dist', 15 | 'calcite', 16 | 'assets' 17 | ), 18 | dest: '.' 19 | } 20 | ] 21 | }) 22 | ] 23 | }); 24 | -------------------------------------------------------------------------------- /vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-vue-starter", 3 | "private": true, 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview", 8 | "postinstall": "npm run copy", 9 | "copy": "ncp ./node_modules/@esri/calcite-components/dist/calcite/assets/ ./public/assets/" 10 | }, 11 | "dependencies": { 12 | "@esri/calcite-components": "^2.1.0", 13 | "vue": "^3.2.45" 14 | }, 15 | "devDependencies": { 16 | "@vitejs/plugin-vue": "^4.0.0", 17 | "ncp": "^2.0.0", 18 | "vite": "^4.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /ember/.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false, 9 | 10 | /** 11 | Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript 12 | rather than JavaScript by default, when a TypeScript version of a given blueprint is available. 13 | */ 14 | "isTypeScriptProject": false 15 | } 16 | -------------------------------------------------------------------------------- /preact-typescript/tests/__mocks__/browserMocks.ts: -------------------------------------------------------------------------------- 1 | // Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage 2 | /** 3 | * An example how to mock localStorage is given below 👇 4 | */ 5 | 6 | /* 7 | // Mocks localStorage 8 | const localStorageMock = (function() { 9 | let store = {}; 10 | 11 | return { 12 | getItem: (key) => store[key] || null, 13 | setItem: (key, value) => store[key] = value.toString(), 14 | clear: () => store = {} 15 | }; 16 | 17 | })(); 18 | 19 | Object.defineProperty(window, 'localStorage', { 20 | value: localStorageMock 21 | }); */ 22 | -------------------------------------------------------------------------------- /react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /preact-typescript/src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <% preact.title %> 6 | 7 | 8 | 9 | 13 | <% preact.headEnd %> 14 | 15 | 16 | <% preact.bodyEnd %> 17 | 18 | 19 | -------------------------------------------------------------------------------- /angular/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 |

7 | Calcite Components Angular Example 8 | 9 |

10 | 11 | 17 | 18 |

The slider currently has a value of {{ sliderValue }}.

19 | 20 | Clear 21 | 22 | -------------------------------------------------------------------------------- /ember/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist/ 5 | /tmp/ 6 | 7 | # dependencies 8 | /bower_components/ 9 | /node_modules/ 10 | 11 | # misc 12 | /.env* 13 | /.pnp* 14 | /.sass-cache 15 | /.eslintcache 16 | /connect.lock 17 | /coverage/ 18 | /libpeerconnection.log 19 | /npm-debug.log* 20 | /testem.log 21 | /yarn-error.log 22 | 23 | # ember-try 24 | /.node_modules.ember-try/ 25 | /bower.json.ember-try 26 | /npm-shrinkwrap.json.ember-try 27 | /package.json.ember-try 28 | /package-lock.json.ember-try 29 | /yarn.lock.ember-try 30 | 31 | # broccoli-debug 32 | /DEBUG/ 33 | -------------------------------------------------------------------------------- /preact-typescript/README.md: -------------------------------------------------------------------------------- 1 | # preact_new 2 | 3 | ## CLI Commands 4 | 5 | - `npm install`: Installs dependencies 6 | 7 | - `npm run dev`: Run a development, HMR server 8 | 9 | - `npm run serve`: Run a production-like server 10 | 11 | - `npm run build`: Production-ready build 12 | 13 | - `npm run lint`: Pass TypeScript files using ESLint 14 | 15 | - `npm run test`: Run Jest and Enzyme with 16 | [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for 17 | your tests 18 | 19 | For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md). 20 | -------------------------------------------------------------------------------- /vue/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import './base.css'; 2 | 3 | #app { 4 | max-width: 1280px; 5 | margin: 0 auto; 6 | padding: 2rem; 7 | 8 | font-weight: normal; 9 | } 10 | 11 | a, 12 | .green { 13 | text-decoration: none; 14 | color: hsla(160, 100%, 37%, 1); 15 | transition: 0.4s; 16 | } 17 | 18 | @media (hover: hover) { 19 | a:hover { 20 | background-color: hsla(160, 100%, 37%, 0.2); 21 | } 22 | } 23 | 24 | @media (min-width: 1024px) { 25 | body { 26 | display: flex; 27 | place-items: center; 28 | } 29 | 30 | #app { 31 | display: grid; 32 | grid-template-columns: 1fr 1fr; 33 | padding: 0 2rem; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-webpack-starter", 3 | "private": true, 4 | "main": "index.js", 5 | "scripts": { 6 | "start": "webpack-dev-server --open", 7 | "build": "webpack" 8 | }, 9 | "dependencies": { 10 | "@esri/calcite-components": "^2.1.0" 11 | }, 12 | "devDependencies": { 13 | "copy-webpack-plugin": "^11.0.0", 14 | "css-loader": "^6.7.3", 15 | "html-loader": "^4.2.0", 16 | "html-webpack-plugin": "^5.5.0", 17 | "mini-css-extract-plugin": "^2.7.2", 18 | "style-loader": "^3.3.1", 19 | "webpack": "^5.75.0", 20 | "webpack-cli": "^5.0.1", 21 | "webpack-dev-server": "^4.11.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /preact-typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "esModuleInterop": true, 7 | "jsx": "react", 8 | "jsxFactory": "h", 9 | "jsxFragmentFactory": "Fragment", 10 | "noEmit": true, 11 | "allowJs": true, 12 | "checkJs": true, 13 | "skipLibCheck": true, 14 | "baseUrl": "./", 15 | "paths": { 16 | "react": ["./node_modules/preact/compat"], 17 | "react-dom": ["./node_modules/preact/compat"] 18 | } 19 | }, 20 | "include": ["src/**/*"], 21 | "files": ["node_modules/@esri/calcite-components/dist/types/preact.d.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /preact-typescript/src/components/app.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { Route, Router } from 'preact-router'; 3 | 4 | import Header from './header'; 5 | 6 | // Code-splitting is automated for `routes` directory 7 | import Home from '../routes/home'; 8 | import Profile from '../routes/profile'; 9 | 10 | const App = () => ( 11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | ); 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Calcite Design System repository 4 | url: https://github.com/Esri/calcite-design-system/issues/new/choose 5 | about: Report bugs or request enhancements in the Calcite Design System GitHub repo. 6 | - name: Esri Support 7 | url: https://support.esri.com/en/contact-tech-support 8 | about: Report bugs in released versions of Calcite Design System, and request enhancements. 9 | - name: Esri Community 10 | url: https://community.esri.com/t5/calcite-design-system/ct-p/calcite-design-system 11 | about: Ask questions, share ideas, and collaborate with others on Calcite Design System. 12 | -------------------------------------------------------------------------------- /ember/testem.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | test_page: 'tests/index.html?hidepassed', 5 | disable_watching: true, 6 | launch_in_ci: ['Chrome'], 7 | launch_in_dev: ['Chrome'], 8 | browser_start_timeout: 120, 9 | browser_args: { 10 | Chrome: { 11 | ci: [ 12 | // --no-sandbox is needed when running Chrome inside a container 13 | process.env.CI ? '--no-sandbox' : null, 14 | '--headless', 15 | '--disable-dev-shm-usage', 16 | '--disable-software-rasterizer', 17 | '--mute-audio', 18 | '--remote-debugging-port=0', 19 | '--window-size=1440,900', 20 | ].filter(Boolean), 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 7 | setAssetPath(window.location.href); 8 | 9 | ReactDOM.render( 10 | 11 | 12 | , 13 | document.getElementById('root') 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Calcite Components - Vite 10 | 11 | 12 | 13 | 14 |

15 | Hello, Vite 16 | 17 |

18 | 19 | 20 | My button 21 | 22 | 23 | -------------------------------------------------------------------------------- /rollup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-rollup-starter", 3 | "devDependencies": { 4 | "@rollup/plugin-commonjs": "^21.0.1", 5 | "@rollup/plugin-node-resolve": "^13.1.3", 6 | "@stencil/core": "^2.12.1", 7 | "npm-run-all": "^4.1.5", 8 | "rollup": "^2.63.0", 9 | "rollup-plugin-copy": "^3.4.0", 10 | "rollup-plugin-postcss": "^4.0.2", 11 | "rollup-plugin-terser": "^7.0.2", 12 | "serve": "^13.0.2" 13 | }, 14 | "dependencies": { 15 | "@esri/calcite-components": "^2.1.0" 16 | }, 17 | "scripts": { 18 | "build": "rollup -c", 19 | "watch": "rollup -c -w", 20 | "dev": "npm-run-all --parallel start watch", 21 | "start": "serve public" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /ember/app/templates/application.hbs: -------------------------------------------------------------------------------- 1 |

Hello, Ember 4!

2 | 3 | Open Modal 7 | 8 | 14 | 15 |
16 | Because it works! 17 |
18 | 24 | Cancel 25 | 26 | -------------------------------------------------------------------------------- /preact-typescript/src/components/header/index.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { Link } from 'preact-router/match'; 3 | import style from './style.css'; 4 | 5 | const Header = () => ( 6 |
7 | 8 | 9 |

Preact CLI

10 | 11 | 22 |
23 | ); 24 | 25 | export default Header; 26 | -------------------------------------------------------------------------------- /react/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | COPYRIGHT © 2023 Esri 2 | 3 | All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. 4 | 5 | This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice. 6 | 7 | See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english 8 | 9 | For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA 10 | 11 | email: contracts@esri.com 12 | -------------------------------------------------------------------------------- /ember/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ember4 6 | 7 | 8 | 9 | {{content-for "head"}} 10 | 11 | 12 | 13 | 14 | {{content-for "head-footer"}} 15 | 16 | 17 | {{content-for "body"}} 18 | 19 | 20 | 21 | 22 | {{content-for "body-footer"}} 23 | 24 | 25 | -------------------------------------------------------------------------------- /angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | /.angular 9 | 10 | # Node 11 | /node_modules 12 | npm-debug.log 13 | yarn-error.log 14 | 15 | # IDEs and editors 16 | .idea/ 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # Visual Studio Code 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | .history/* 31 | 32 | # Miscellaneous 33 | /.angular/cache 34 | .sass-cache/ 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | testem.log 39 | /typings 40 | /src/assets 41 | 42 | # System files 43 | .DS_Store 44 | Thumbs.db 45 | -------------------------------------------------------------------------------- /preact-typescript/src/style/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: 'Helvetica Neue', arial, sans-serif; 3 | font-weight: 400; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | 7 | color-scheme: light dark; 8 | color: #444; 9 | background: #fafafa; 10 | } 11 | 12 | @media (prefers-color-scheme: dark) { 13 | :root { 14 | color: #fff; 15 | background: #1c1c1c; 16 | } 17 | } 18 | 19 | body { 20 | margin: 0; 21 | padding: 0; 22 | min-height: 100vh; 23 | } 24 | 25 | #app > main { 26 | display: flex; 27 | padding-top: 3.5rem; 28 | margin: 0 auto; 29 | min-height: calc(100vh - 3.5rem); 30 | max-width: 1280px; 31 | align-items: center; 32 | justify-content: center; 33 | } 34 | 35 | @media (max-width: 639px) { 36 | #app > main { 37 | margin: 0 2rem; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /vite/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This example uses the Custom Elements build of Calcite Components. 3 | * Refer to the documentation if switching to the Distribution build: 4 | * https://developers.arcgis.com/calcite-design-system/get-started/#choose-a-build 5 | **/ 6 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 7 | import '@esri/calcite-components/dist/components/calcite-button'; 8 | import '@esri/calcite-components/dist/components/calcite-icon'; 9 | import '@esri/calcite-components/dist/components/calcite-date-picker'; 10 | import '@esri/calcite-components/dist/components/calcite-loader'; 11 | 12 | import '@esri/calcite-components/dist/calcite/calcite.css'; 13 | import './style.css'; 14 | 15 | setAssetPath(location.href); 16 | 17 | const loader = document.createElement('calcite-loader'); 18 | document.body.appendChild(loader); 19 | -------------------------------------------------------------------------------- /angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent implements OnInit, OnDestroy { 9 | title = 'calcite-components-angular-example'; 10 | sliderValue = 50; 11 | 12 | public isLoading: boolean = true; 13 | 14 | ngOnInit() { 15 | this.fetch(); 16 | } 17 | 18 | ngOnDestroy(): void { 19 | this.clearSliderValue(); 20 | } 21 | 22 | async fetch() { 23 | await new Promise((r) => setTimeout(r, 2000)); 24 | this.isLoading = false; 25 | } 26 | 27 | onSliderInput(event: Event) { 28 | const value = (event.target as HTMLCalciteSliderElement).value; 29 | if (typeof value === 'number') { 30 | this.sliderValue = value; 31 | } 32 | } 33 | 34 | clearSliderValue() { 35 | this.sliderValue = 0; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /.github/workflows/bump-examples.yml: -------------------------------------------------------------------------------- 1 | name: Bump Examples 2 | on: 3 | workflow_dispatch: 4 | schedule: 5 | - cron: '0 0 * * 4' 6 | jobs: 7 | bump: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | - uses: actions/setup-node@v2 12 | with: 13 | node-version: lts/* 14 | - name: bump examples 15 | run: node ./.github/scripts/bump-examples.js 16 | - name: submit pull request 17 | uses: peter-evans/create-pull-request@v3 18 | with: 19 | base: main 20 | branch: action/bump-examples 21 | commit-message: 'build(deps): update calcite components version' 22 | token: ${{ secrets.GITHUB_TOKEN }} 23 | assignees: ${{ secrets.PRIMARY_MAINTAINERS }} 24 | title: 'build(deps): update calcite components version' 25 | body: This PR was automatically generated by the bump-examples GitHub Action 26 | delete-branch: true 27 | -------------------------------------------------------------------------------- /preact-typescript/src/components/header/style.css: -------------------------------------------------------------------------------- 1 | .header { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | display: flex; 6 | justify-content: space-between; 7 | width: 100%; 8 | height: 3.5rem; 9 | background: #673ab8; 10 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 11 | z-index: 50; 12 | } 13 | 14 | .header a { 15 | display: inline-block; 16 | padding: 0 1rem; 17 | color: #fff; 18 | text-decoration: none; 19 | line-height: 3.5rem; 20 | } 21 | 22 | .header a:hover, 23 | .header a:active { 24 | background: rgba(0, 0, 0, 0.2); 25 | } 26 | 27 | .header a.logo { 28 | display: flex; 29 | align-items: center; 30 | padding: 0.5rem 1rem; 31 | } 32 | 33 | .logo h1 { 34 | padding: 0 0.5rem; 35 | font-size: 1.5rem; 36 | line-height: 2rem; 37 | font-weight: 400; 38 | } 39 | 40 | @media (max-width: 639px) { 41 | .logo h1 { 42 | display: none; 43 | } 44 | } 45 | 46 | .header nav a.active { 47 | background: rgba(0, 0, 0, 0.4); 48 | } 49 | -------------------------------------------------------------------------------- /angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "allowSyntheticDefaultImports": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "downlevelIteration": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true, 28 | "fullTemplateTypeCheck": true 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /preact-typescript/src/routes/profile/index.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { useEffect, useState } from 'preact/hooks'; 3 | 4 | interface Props { 5 | user: string; 6 | } 7 | 8 | // Note: `user` comes from the URL, courtesy of our router 9 | const Profile = ({ user }: Props) => { 10 | const [time, setTime] = useState(Date.now()); 11 | const [count, setCount] = useState(10); 12 | 13 | useEffect(() => { 14 | const timer = setInterval(() => setTime(Date.now()), 1000); 15 | return () => clearInterval(timer); 16 | }, []); 17 | 18 | return ( 19 |
20 |

Profile: {user}

21 |

This is the user profile for a user named {user}.

22 | 23 |
Current time: {new Date(time).toLocaleString()}
24 | 25 |

26 | setCount((count) => count + 1)}>Click Me{' '} 27 | Clicked {count} times. 28 |

29 |
30 | ); 31 | }; 32 | 33 | export default Profile; 34 | -------------------------------------------------------------------------------- /vue/src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 25 | 26 | 54 | -------------------------------------------------------------------------------- /preact-typescript/src/routes/home/index.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import style from './style.css'; 3 | 4 | const Home = () => { 5 | return ( 6 |
7 |

Welcome to Calcite Components

8 |

We even have support for TypeScript!

9 | 11 | console.log( 12 | 'closing dropdown, the following item(s) are selected', 13 | (event.target as HTMLCalciteDropdownElement).selectedItems 14 | ) 15 | } 16 | > 17 | 18 | Sort 19 | 20 | 21 | Relevance 22 | Date modified 23 | Title 24 | 25 | 26 |
27 | ); 28 | }; 29 | 30 | export default Home; 31 | -------------------------------------------------------------------------------- /react/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import "@esri/calcite-components/dist/components/calcite-button.js"; 3 | import "@esri/calcite-components/dist/components/calcite-icon.js"; 4 | import "@esri/calcite-components/dist/components/calcite-slider.js"; 5 | import { 6 | CalciteButton, 7 | CalciteIcon, 8 | CalciteSlider 9 | } from '@esri/calcite-components-react'; 10 | import '@esri/calcite-components/dist/calcite/calcite.css'; 11 | 12 | function App() { 13 | const [sliderValue, setSliderValue] = useState(50); 14 | 15 | return ( 16 | <> 17 |

18 | Hello, React 19 |

20 | setSliderValue(0)}>Reset 21 | setSliderValue(e.target.value)} 27 | /> 28 |

The slider currently has a value of {sliderValue}

29 | 30 | ); 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /preact-typescript/src/routes/home/style.css: -------------------------------------------------------------------------------- 1 | .home { 2 | text-align: center; 3 | } 4 | 5 | .home img { 6 | padding: 1.5rem; 7 | } 8 | 9 | .home img:hover { 10 | filter: drop-shadow(0 0 3rem #673ab888); 11 | } 12 | 13 | .home section { 14 | margin-top: 10rem; 15 | display: grid; 16 | grid-template-columns: 1fr 1fr 1fr; 17 | column-gap: 1.5rem; 18 | } 19 | 20 | @media (max-width: 639px) { 21 | .home section { 22 | margin-top: 5rem; 23 | grid-template-columns: 1fr; 24 | row-gap: 1rem; 25 | } 26 | } 27 | 28 | .resource { 29 | padding: 0.75rem 1.5rem; 30 | border-radius: 0.5rem; 31 | text-align: left; 32 | text-decoration: none; 33 | color: #000; 34 | background-color: #f1f1f1; 35 | border: 1px solid transparent; 36 | } 37 | 38 | .resource:hover { 39 | border: 1px solid #000; 40 | box-shadow: 0 25px 50px -12px #673ab888; 41 | } 42 | 43 | @media (prefers-color-scheme: dark) { 44 | .resource { 45 | color: #fff; 46 | background-color: #181818; 47 | } 48 | .resource:hover { 49 | border: 1px solid #bbb; 50 | box-shadow: 0 25px 50px -12px #673ab888; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /vue/src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CopyPlugin = require('copy-webpack-plugin'); 4 | 5 | module.exports = { 6 | mode: 'production', 7 | performance: { 8 | hints: false, 9 | maxEntrypointSize: 512000, 10 | maxAssetSize: 512000 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.html$/, 16 | use: [ 17 | { 18 | loader: 'html-loader', 19 | options: { minimize: true } 20 | } 21 | ] 22 | }, 23 | { 24 | test: /\.css$/i, 25 | use: [MiniCssExtractPlugin.loader, 'css-loader'] 26 | } 27 | ] 28 | }, 29 | plugins: [ 30 | new CopyPlugin({ 31 | patterns: [ 32 | { 33 | from: '**', 34 | context: 'node_modules/@esri/calcite-components/dist/calcite/', 35 | to: './' 36 | } 37 | ] 38 | }), 39 | new HtmlWebpackPlugin({ 40 | template: './src/index.html', 41 | filename: './index.html' 42 | }), 43 | new MiniCssExtractPlugin() 44 | ] 45 | }; 46 | -------------------------------------------------------------------------------- /ember/tests/unit/initializers/calcite-components-test.js: -------------------------------------------------------------------------------- 1 | import Application from '@ember/application'; 2 | 3 | import config from 'ember4/config/environment'; 4 | import { initialize } from 'ember4/initializers/calcite-components'; 5 | import { module, test } from 'qunit'; 6 | import Resolver from 'ember-resolver'; 7 | import { run } from '@ember/runloop'; 8 | 9 | module('Unit | Initializer | calcite-components', function (hooks) { 10 | hooks.beforeEach(function () { 11 | this.TestApplication = class TestApplication extends Application { 12 | modulePrefix = config.modulePrefix; 13 | podModulePrefix = config.podModulePrefix; 14 | Resolver = Resolver; 15 | }; 16 | this.TestApplication.initializer({ 17 | name: 'initializer under test', 18 | initialize, 19 | }); 20 | 21 | this.application = this.TestApplication.create({ autoboot: false }); 22 | }); 23 | 24 | hooks.afterEach(function () { 25 | run(this.application, 'destroy'); 26 | }); 27 | 28 | // TODO: Replace this with your real tests. 29 | test('it works', async function (assert) { 30 | await this.application.boot(); 31 | 32 | assert.ok(true); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { CalciteComponentsModule } from '@esri/calcite-components-angular'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(() => 7 | TestBed.configureTestingModule({ 8 | imports: [CalciteComponentsModule], 9 | declarations: [AppComponent] 10 | }).compileComponents() 11 | ); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'calcite-components-angular-example'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('calcite-components-angular-example'); 23 | }); 24 | 25 | it('should render calcite-loader with label', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement as HTMLElement; 29 | expect(compiled.querySelector('calcite-loader')?.label).toBe('Loading...'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /rollup/rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from '@rollup/plugin-node-resolve'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import { terser } from 'rollup-plugin-terser'; 4 | import copy from 'rollup-plugin-copy'; 5 | import postcss from 'rollup-plugin-postcss'; 6 | 7 | // `npm run build` -> `production` is true 8 | // `npm run dev` -> `production` is false 9 | const production = !process.env.ROLLUP_WATCH; 10 | 11 | export default { 12 | input: 'src/main.js', 13 | output: [{ dir: 'public', format: 'es' }], 14 | plugins: [ 15 | resolve(), // tells Rollup how to find node_modules 16 | commonjs({ 17 | exclude: [ 18 | 'node_modules/@esri/calcite-components/dist/custom-elements/index.js' 19 | ] 20 | }), // needed if you're using libraries that leverage commonjs 21 | postcss({ 22 | // allows us to import the global calcite css 23 | extensions: ['.css'] 24 | }), 25 | copy({ 26 | // copy over the calcite-components assets 27 | targets: [ 28 | { 29 | src: './node_modules/@esri/calcite-components/dist/calcite/assets', 30 | dest: './public' 31 | } 32 | ] 33 | }), 34 | production && terser() // minify, but only in production 35 | ] 36 | }; 37 | -------------------------------------------------------------------------------- /ember/tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ember4 Tests 6 | 7 | 8 | 9 | {{content-for "head"}} {{content-for "test-head"}} 10 | 11 | 12 | 13 | 14 | 15 | {{content-for "head-footer"}} {{content-for "test-head-footer"}} 16 | 17 | 18 | {{content-for "body"}} {{content-for "test-body"}} 19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | {{content-for "body-footer"}} {{content-for "test-body-footer"}} 34 | 35 | 36 | -------------------------------------------------------------------------------- /vue/src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /ember/ember-cli-build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const EmberApp = require('ember-cli/lib/broccoli/ember-app'); 4 | const { Funnel } = require('broccoli-funnel'); 5 | 6 | module.exports = function (defaults) { 7 | let app = new EmberApp(defaults, { 8 | // Add options here 9 | }); 10 | 11 | // Use `app.import` to add additional libraries to the generated 12 | // output files. 13 | // 14 | // If you need to use different assets in different 15 | // environments, specify an object as the first parameter. That 16 | // object's keys should be the environment name and the values 17 | // should be the asset to use in that environment. 18 | // 19 | // If the library that you are including contains AMD or ES6 20 | // modules that you would like to import into your application 21 | // please specify an object with the list of modules as keys 22 | // along with the exports of each module as its value. 23 | 24 | // Import the calcite CSS into the app CSS 25 | app.import('node_modules/@esri/calcite-components/dist/calcite/calcite.css'); 26 | 27 | // Funnel the calcite static assets into the build assets directory 28 | let calciteAssetsTree = new Funnel( 29 | './node_modules/@esri/calcite-components/dist', 30 | { 31 | srcDir: '/', 32 | include: ['calcite/assets/**'], 33 | destDir: '/assets', 34 | } 35 | ); 36 | 37 | return app.toTree([calciteAssetsTree]); 38 | }; 39 | -------------------------------------------------------------------------------- /react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-react-starter", 3 | "private": true, 4 | "dependencies": { 5 | "@esri/calcite-components-react": "^2.1.0", 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^16.7.0", 10 | "react-dom": "^16.7.0", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "devDependencies": { 15 | "ncp": "^2.0.0" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject", 22 | "postinstall": "npm run copy", 23 | "copy": "ncp ./node_modules/@esri/calcite-components/dist/calcite/assets/ ./public/assets/" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "jest": { 32 | "transformIgnorePatterns": [ 33 | "node_modules/(?!(@esri/calcite-*|@stencil/core)).*\\.js$" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | }, 48 | "volta": { 49 | "node": "16.13.2", 50 | "npm": "8.4.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-angular-starter", 3 | "private": true, 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve -o", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test", 10 | "copy": "ncp ./node_modules/@esri/calcite-components/dist/calcite/assets ./src/assets", 11 | "postinstall": "npm run copy" 12 | }, 13 | "dependencies": { 14 | "@angular/animations": "^17.0.3", 15 | "@angular/common": "^17.0.3", 16 | "@angular/compiler": "^17.0.3", 17 | "@angular/core": "^17.0.3", 18 | "@angular/forms": "^17.0.3", 19 | "@angular/platform-browser": "^17.0.3", 20 | "@angular/platform-browser-dynamic": "^17.0.3", 21 | "@angular/router": "^17.0.3", 22 | "@esri/calcite-components-angular": "^2.3.0", 23 | "rxjs": "~7.8.1", 24 | "tslib": "^2.6.2", 25 | "zone.js": "~0.14.2" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "^17.0.1", 29 | "@angular/cli": "~17.0.1", 30 | "@angular/compiler-cli": "^17.0.3", 31 | "@types/jasmine": "^5.1.2", 32 | "@types/sortablejs": "^1.15.5", 33 | "jasmine-core": "^5.1.1", 34 | "karma": "~6.4.2", 35 | "karma-chrome-launcher": "~3.2.0", 36 | "karma-coverage": "~2.2.1", 37 | "karma-jasmine": "^5.1.0", 38 | "karma-jasmine-html-reporter": "^2.1.0", 39 | "ncp": "^2.0.0", 40 | "typescript": "~5.2.2" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /ember/tests/helpers/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | setupApplicationTest as upstreamSetupApplicationTest, 3 | setupRenderingTest as upstreamSetupRenderingTest, 4 | setupTest as upstreamSetupTest, 5 | } from 'ember-qunit'; 6 | 7 | // This file exists to provide wrappers around ember-qunit's / ember-mocha's 8 | // test setup functions. This way, you can easily extend the setup that is 9 | // needed per test type. 10 | 11 | function setupApplicationTest(hooks, options) { 12 | upstreamSetupApplicationTest(hooks, options); 13 | 14 | // Additional setup for application tests can be done here. 15 | // 16 | // For example, if you need an authenticated session for each 17 | // application test, you could do: 18 | // 19 | // hooks.beforeEach(async function () { 20 | // await authenticateSession(); // ember-simple-auth 21 | // }); 22 | // 23 | // This is also a good place to call test setup functions coming 24 | // from other addons: 25 | // 26 | // setupIntl(hooks); // ember-intl 27 | // setupMirage(hooks); // ember-cli-mirage 28 | } 29 | 30 | function setupRenderingTest(hooks, options) { 31 | upstreamSetupRenderingTest(hooks, options); 32 | 33 | // Additional setup for rendering tests can be done here. 34 | } 35 | 36 | function setupTest(hooks, options) { 37 | upstreamSetupTest(hooks, options); 38 | 39 | // Additional setup for unit tests can be done here. 40 | } 41 | 42 | export { setupApplicationTest, setupRenderingTest, setupTest }; 43 | -------------------------------------------------------------------------------- /ember/config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (environment) { 4 | let ENV = { 5 | modulePrefix: 'ember4', 6 | environment, 7 | rootURL: '/', 8 | locationType: 'history', 9 | EmberENV: { 10 | FEATURES: { 11 | // Here you can enable experimental features on an ember canary build 12 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true 13 | }, 14 | EXTEND_PROTOTYPES: { 15 | // Prevent Ember Data from overriding Date.parse. 16 | Date: false, 17 | }, 18 | }, 19 | 20 | APP: { 21 | // Here you can pass flags/options to your application instance 22 | // when it is created 23 | }, 24 | }; 25 | 26 | if (environment === 'development') { 27 | // ENV.APP.LOG_RESOLVER = true; 28 | // ENV.APP.LOG_ACTIVE_GENERATION = true; 29 | // ENV.APP.LOG_TRANSITIONS = true; 30 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 31 | // ENV.APP.LOG_VIEW_LOOKUPS = true; 32 | } 33 | 34 | if (environment === 'test') { 35 | // Testem prefers this... 36 | ENV.locationType = 'none'; 37 | 38 | // keep test console output quieter 39 | ENV.APP.LOG_ACTIVE_GENERATION = false; 40 | ENV.APP.LOG_VIEW_LOOKUPS = false; 41 | 42 | ENV.APP.rootElement = '#ember-testing'; 43 | ENV.APP.autoboot = false; 44 | } 45 | 46 | if (environment === 'production') { 47 | // here you can enable a production-specific feature 48 | } 49 | 50 | return ENV; 51 | }; 52 | -------------------------------------------------------------------------------- /ember/.eslintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | ecmaVersion: 2018, 8 | sourceType: 'module', 9 | ecmaFeatures: { 10 | legacyDecorators: true, 11 | }, 12 | }, 13 | plugins: ['ember'], 14 | extends: [ 15 | 'eslint:recommended', 16 | 'plugin:ember/recommended', 17 | 'plugin:prettier/recommended', 18 | ], 19 | env: { 20 | browser: true, 21 | }, 22 | rules: {}, 23 | overrides: [ 24 | // node files 25 | { 26 | files: [ 27 | './.eslintrc.js', 28 | './.prettierrc.js', 29 | './.template-lintrc.js', 30 | './ember-cli-build.js', 31 | './testem.js', 32 | './blueprints/*/index.js', 33 | './config/**/*.js', 34 | './lib/*/index.js', 35 | './server/**/*.js', 36 | ], 37 | parserOptions: { 38 | sourceType: 'script', 39 | }, 40 | env: { 41 | browser: false, 42 | node: true, 43 | }, 44 | plugins: ['node'], 45 | extends: ['plugin:node/recommended'], 46 | rules: { 47 | // this can be removed once the following is fixed 48 | // https://github.com/mysticatea/eslint-plugin-node/issues/77 49 | 'node/no-unpublished-require': 'off', 50 | }, 51 | }, 52 | { 53 | // test files 54 | files: ['tests/**/*-test.{js,ts}'], 55 | extends: ['plugin:qunit/recommended'], 56 | }, 57 | ], 58 | }; 59 | -------------------------------------------------------------------------------- /vue/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 38 | 39 | 49 | -------------------------------------------------------------------------------- /vite/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /.github/scripts/bump-examples.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path'); 2 | const { 3 | promises: { readdir } 4 | } = require('fs'); 5 | const { spawn } = require('child_process'); 6 | 7 | const getDirectories = async (repo) => 8 | (await readdir(resolve(__dirname, repo), { withFileTypes: true })) 9 | .filter((dirent) => dirent.isDirectory() && dirent.name.charAt(0) !== '.') 10 | .map((dirent) => dirent.name); 11 | 12 | (async () => { 13 | try { 14 | const PATH_TO_EXAMPLES_REPO = '../..'; 15 | const examples = await getDirectories(PATH_TO_EXAMPLES_REPO); 16 | 17 | const installLatestCC = 'npm i @esri/calcite-components@latest\n'; 18 | const installLatestCCReact = 19 | 'npm i @esri/calcite-components-react@latest\n'; 20 | const installLatestCCAngular = 21 | 'npm i @esri/calcite-components-angular@latest\n'; 22 | 23 | examples.forEach((example) => { 24 | const child = spawn('bash'); 25 | child.on('exit', (code) => { 26 | console.log(`${example} bump exit code: ${code}`); 27 | }); 28 | 29 | switch (example) { 30 | case 'react': 31 | child.stdin.write(`cd ${example}\n`); 32 | child.stdin.write(installLatestCCReact); 33 | break; 34 | case 'angular': 35 | child.stdin.write(`cd ${example}\n`); 36 | child.stdin.write(installLatestCCAngular); 37 | break; 38 | default: 39 | child.stdin.write(`cd ${example}\n`); 40 | child.stdin.write(installLatestCC); 41 | } 42 | child.stdin.end(); 43 | }); 44 | } catch (e) { 45 | console.error(e); 46 | } 47 | })(); 48 | -------------------------------------------------------------------------------- /common-patterns/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 19 | 20 | Calcite common workflow patterns 21 | 22 | 23 | 24 | 29 | 30 | 31 |
32 |
33 | 34 | 41 | 42 | 43 | 44 | 51 | 52 | 53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /vue/src/components/WelcomeItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 87 | -------------------------------------------------------------------------------- /preact-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-preact-starter", 3 | "private": true, 4 | "scripts": { 5 | "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact build --no-prerender", 6 | "serve": "sirv build --cors --single", 7 | "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact watch", 8 | "lint": "eslint src", 9 | "test": "jest", 10 | "postinstall": "npm run copy", 11 | "copy": "ncp ./node_modules/@esri/calcite-components/dist/calcite/assets/ ./src/assets/" 12 | }, 13 | "eslintConfig": { 14 | "parser": "@typescript-eslint/parser", 15 | "extends": [ 16 | "preact", 17 | "plugin:@typescript-eslint/recommended" 18 | ], 19 | "ignorePatterns": [ 20 | "build/" 21 | ] 22 | }, 23 | "dependencies": { 24 | "@esri/calcite-components": "^2.1.0", 25 | "preact": "^10.10.0", 26 | "preact-render-to-string": "^5.2.1", 27 | "preact-router": "^3.2.1" 28 | }, 29 | "devDependencies": { 30 | "@types/enzyme": "^3.10.12", 31 | "@types/jest": "^27.4.1", 32 | "@typescript-eslint/eslint-plugin": "^5.30.6", 33 | "@typescript-eslint/parser": "^5.30.6", 34 | "cross-env": "^7.0.3", 35 | "enzyme": "^3.11.0", 36 | "enzyme-adapter-preact-pure": "^4.0.1", 37 | "eslint": "^8.20.0", 38 | "eslint-config-preact": "^1.3.0", 39 | "jest": "^27.5.1", 40 | "jest-preset-preact": "^4.0.5", 41 | "ncp": "^2.0.0", 42 | "preact-cli": "^3.4.0", 43 | "sirv-cli": "^2.0.2", 44 | "typescript": "^4.5.2" 45 | }, 46 | "jest": { 47 | "preset": "jest-preset-preact", 48 | "setupFiles": [ 49 | "/tests/__mocks__/browserMocks.ts", 50 | "/tests/__mocks__/setupTests.ts" 51 | ] 52 | }, 53 | "volta": { 54 | "node": "18.13.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue 2 | 3 | ## Project setup 4 | 5 | To install dependences, run: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | ## Compile and hot-reload for development 12 | 13 | ```sh 14 | npm run dev 15 | ``` 16 | 17 | ## Compile and minify for production 18 | 19 | ```sh 20 | npm run build 21 | ``` 22 | 23 | ## Calcite Components with Vue 24 | 25 | To install calcite components, first run: 26 | 27 | ```sh 28 | npm install --save @esri/calcite-components 29 | ``` 30 | 31 | After Calcite Components is installed, import and call `setAssetPath` to load the assets: 32 | 33 | ```js 34 | // src/main.js 35 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 36 | setAssetPath(location.href); 37 | ``` 38 | 39 | Import the Calcite Components when they are used: 40 | 41 | ```js 42 | // src/components/HelloWorld.vue 43 | import '@esri/calcite-components/dist/components/calcite-button'; 44 | import '@esri/calcite-components/dist/components/calcite-icon'; 45 | import '@esri/calcite-components/dist/components/calcite-date-picker'; 46 | ``` 47 | 48 | ### Adding the CSS 49 | 50 | The global Calcite Components CSS can be added with a ` 54 | ``` 55 | 56 | ### Adding the assets 57 | 58 | Static assets must be copied over to the public folder manually. A `copy` script has been created to make this process easier: 59 | 60 | ```sh 61 | npm run copy 62 | ``` 63 | 64 | This will copy the assets required by the components to your project's `public/assets` directory. 65 | 66 | ## Recommended IDE setup 67 | 68 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). 69 | 70 | ## Customize configuration 71 | 72 | See [Vite Configuration Reference](https://vitejs.dev/config/). 73 | -------------------------------------------------------------------------------- /vue/src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /vite/README.md: -------------------------------------------------------------------------------- 1 | # Vite 2 | 3 | This repo contains a bare-bones example of how to create an application using Vite and Calcite Components. It was generated with [Vite](https://vitejs.dev/). 4 | 5 | To get started using this project, use: 6 | 7 | ```sh 8 | npm install 9 | npm run dev 10 | ``` 11 | 12 | This will install dependencies and then start up a development server on [localhost:3000](http://localhost:3000). 13 | 14 | ## Calcite Components with Vite 15 | 16 | To install Calcite Components, first run: 17 | 18 | ```sh 19 | npm install --save @esri/calcite-components 20 | ``` 21 | 22 | After Calcite Components is installed, import the components you will use in the app as well as the global CSS: 23 | 24 | ```js 25 | // main.js 26 | import '@esri/calcite-components/dist/components/calcite-button'; 27 | import '@esri/calcite-components/dist/components/calcite-icon'; 28 | import '@esri/calcite-components/dist/components/calcite-date-picker'; 29 | import '@esri/calcite-components/dist/calcite/calcite.css'; 30 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 31 | 32 | setAssetPath(location.href); 33 | ``` 34 | 35 | Using `setAssetPath` will ensure that Calcite Components look for assets like icons in the correct location (more on copying assets below). 36 | 37 | ## Configuring Vite 38 | 39 | There are a few more steps we need to take so that Vite can successfully bundle our application. In addition to the basic configuration provided by Vite, we need to: 40 | 41 | - copy over icons 42 | 43 | To that end, at the top of your config, add the following import: 44 | 45 | ```js 46 | import { defineConfig } from 'vite'; 47 | import copy from 'rollup-plugin-copy'; 48 | ``` 49 | 50 | ### Copying Icons 51 | 52 | You can use the `rollup-plugin-copy` package to copy Calcite Components' assets to your app: 53 | 54 | ```js 55 | export default defineConfig({ 56 | plugins: [ 57 | copy({ 58 | targets: [ 59 | { 60 | src: 'node_modules/@esri/calcite-components/dist/calcite/assets/', 61 | dest: 'public/' 62 | } 63 | ] 64 | }) 65 | ] 66 | }); 67 | ``` 68 | -------------------------------------------------------------------------------- /vue/src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | position: relative; 59 | font-weight: normal; 60 | } 61 | 62 | body { 63 | min-height: 100vh; 64 | color: var(--color-text); 65 | background: var(--color-background); 66 | transition: color 0.5s, background-color 0.5s; 67 | line-height: 1.6; 68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 69 | Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 70 | sans-serif; 71 | font-size: 15px; 72 | text-rendering: optimizeLegibility; 73 | -webkit-font-smoothing: antialiased; 74 | -moz-osx-font-smoothing: grayscale; 75 | } 76 | -------------------------------------------------------------------------------- /ember/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calcite-ember-starter", 3 | "private": true, 4 | "directories": { 5 | "doc": "doc", 6 | "test": "tests" 7 | }, 8 | "scripts": { 9 | "build": "ember build --environment=production", 10 | "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"", 11 | "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix", 12 | "lint:hbs": "ember-template-lint .", 13 | "lint:hbs:fix": "ember-template-lint . --fix", 14 | "lint:js": "eslint . --cache", 15 | "lint:js:fix": "eslint . --fix", 16 | "start": "ember serve", 17 | "test": "npm-run-all lint test:*", 18 | "test:ember": "ember test" 19 | }, 20 | "devDependencies": { 21 | "@ember/optional-features": "^2.0.0", 22 | "@ember/test-helpers": "^2.6.0", 23 | "@esri/calcite-components": "^2.1.0", 24 | "@glimmer/component": "^1.0.4", 25 | "@glimmer/tracking": "^1.0.4", 26 | "babel-eslint": "^10.1.0", 27 | "broccoli-asset-rev": "^3.0.0", 28 | "ember-auto-import": "^2.4.1", 29 | "ember-cli": "~4.3.0", 30 | "ember-cli-app-version": "^5.0.0", 31 | "ember-cli-babel": "^7.26.11", 32 | "ember-cli-dependency-checker": "^3.2.0", 33 | "ember-cli-htmlbars": "^6.0.1", 34 | "ember-cli-inject-live-reload": "^2.1.0", 35 | "ember-cli-sri": "^2.1.1", 36 | "ember-cli-terser": "^4.0.2", 37 | "ember-data": "~4.3.0", 38 | "ember-export-application-global": "^2.0.1", 39 | "ember-fetch": "^8.1.1", 40 | "ember-load-initializers": "^2.1.2", 41 | "ember-page-title": "^7.0.0", 42 | "ember-qunit": "^5.1.5", 43 | "ember-resolver": "^8.0.3", 44 | "ember-source": "~4.3.0", 45 | "ember-template-lint": "^4.3.0", 46 | "ember-welcome-page": "^6.2.0", 47 | "eslint": "^7.32.0", 48 | "eslint-config-prettier": "^8.5.0", 49 | "eslint-plugin-ember": "^10.5.9", 50 | "eslint-plugin-node": "^11.1.0", 51 | "eslint-plugin-prettier": "^4.0.0", 52 | "eslint-plugin-qunit": "^7.2.0", 53 | "loader.js": "^4.7.0", 54 | "ncp": "^2.0.0", 55 | "npm-run-all": "^4.1.5", 56 | "prettier": "^2.6.1", 57 | "qunit": "^2.18.0", 58 | "qunit-dom": "^2.0.0", 59 | "webpack": "^5.72.0" 60 | }, 61 | "engines": { 62 | "node": "12.* || 14.* || >= 16" 63 | }, 64 | "ember": { 65 | "edition": "octane" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /react/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /rollup/README.md: -------------------------------------------------------------------------------- 1 | # Rollup 2 | 3 | This repo contains a bare-bones example of how to create an application using Rollup and calcite-components. It was generated with [rollup-starter-app](https://github.com/rollup/rollup-starter-lib). 4 | 5 | To get started using this project, use: 6 | 7 | ``` 8 | npm install 9 | npm run dev 10 | ``` 11 | 12 | This will install dependencies and then start up a development server on [localhost:5000](http://localhost:5000). 13 | 14 | ## Calcite Components with Rollup 15 | 16 | To install calcite components, first run: 17 | 18 | ``` 19 | npm install --save @esri/calcite-components 20 | ``` 21 | 22 | After calcite-components is installed, import the components you will use in the app as well as the global CSS: 23 | 24 | ```js 25 | // src/main.js 26 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 27 | import '@esri/calcite-components/dist/components/calcite-button'; 28 | import '@esri/calcite-components/dist/components/calcite-icon'; 29 | import '@esri/calcite-components/dist/components/calcite-date-picker'; 30 | import '@esri/calcite-components/dist/calcite/calcite.css'; 31 | 32 | setAssetPath(document.currentScript.src); 33 | ``` 34 | 35 | Using `setAssetPath` will ensure that calcite components look for assets like icons in the correct location (more on copying assets below). 36 | 37 | ## Configuring Rollup 38 | 39 | There are a few more steps we need to take so that rollup can successfully bundle our application. In addition to the basic configuration provided by rollup-starter-app, we need to: 40 | 41 | - copy over icons 42 | - enable importing css into our bundle 43 | - set the output format to `es` 44 | 45 | To that end, at the top of your config, add the following imports: 46 | 47 | ```js 48 | import copy from 'rollup-plugin-copy'; 49 | import postcss from 'rollup-plugin-postcss'; 50 | import path from 'path'; 51 | ``` 52 | 53 | ### Set the Format to ES 54 | 55 | For the module to bundle properly you'll need to use the `es` output format. _**Note**: This will not work if you need to support legacy browsers like IE11_. To set the output format, add the following to the `output` property: 56 | 57 | ```js 58 | output: [{ dir: path.resolve('public'), format: 'es' }], 59 | ``` 60 | 61 | ### Enable CSS Import 62 | 63 | Simply add the postcss plugin to the plugins array: 64 | 65 | ```js 66 | postcss({ 67 | extensions: ['.css'] 68 | }), 69 | ``` 70 | 71 | ### Copying Icons 72 | 73 | To copy the icon assets over, you can use the `rollup-plugin-copy` package, adding it the the same plugins array: 74 | 75 | ```js 76 | copy({ 77 | targets: [ 78 | { 79 | src: path.resolve(__dirname, 'node_modules/@esri/calcite-components/dist/calcite/assets'), 80 | dest: path.resolve(__dirname, 'public') 81 | }, 82 | ] 83 | }), 84 | ``` 85 | -------------------------------------------------------------------------------- /angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-starter": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/angular-starter", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": ["zone.js"], 20 | "tsConfig": "tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": ["src/styles.css"], 26 | "scripts": [] 27 | }, 28 | "configurations": { 29 | "production": { 30 | "budgets": [ 31 | { 32 | "type": "initial", 33 | "maximumWarning": "3mb", 34 | "maximumError": "10mb" 35 | }, 36 | { 37 | "type": "anyComponentStyle", 38 | "maximumWarning": "3mb", 39 | "maximumError": "10mb" 40 | } 41 | ], 42 | "outputHashing": "all" 43 | }, 44 | "development": { 45 | "buildOptimizer": false, 46 | "optimization": false, 47 | "vendorChunk": true, 48 | "extractLicenses": false, 49 | "sourceMap": true, 50 | "namedChunks": true 51 | } 52 | }, 53 | "defaultConfiguration": "production" 54 | }, 55 | "serve": { 56 | "builder": "@angular-devkit/build-angular:dev-server", 57 | "configurations": { 58 | "production": { 59 | "buildTarget": "angular-starter:build:production" 60 | }, 61 | "development": { 62 | "buildTarget": "angular-starter:build:development" 63 | } 64 | }, 65 | "defaultConfiguration": "development" 66 | }, 67 | "extract-i18n": { 68 | "builder": "@angular-devkit/build-angular:extract-i18n", 69 | "options": { 70 | "buildTarget": "angular-starter:build" 71 | } 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": ["zone.js", "zone.js/testing"], 77 | "tsConfig": "tsconfig.spec.json", 78 | "assets": [ 79 | "src/favicon.ico", 80 | "src/assets" 81 | ], 82 | "styles": ["src/styles.css"], 83 | "scripts": [] 84 | } 85 | } 86 | } 87 | } 88 | }, 89 | "cli": { 90 | "analytics": false 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /webpack/README.md: -------------------------------------------------------------------------------- 1 | # Webpack 2 | 3 | ## Project setup 4 | 5 | To install dependencies, run: 6 | 7 | ``` 8 | npm install 9 | ``` 10 | 11 | After installation, you can use `npm start` to start up a development server at `http://localhost:8080/`. 12 | 13 | ## Calcite Components with Webpack 14 | 15 | To install calcite components, first run: 16 | 17 | ``` 18 | npm install --save @esri/calcite-components 19 | ``` 20 | 21 | After calcite-components is installed, import the components you will use in the app: 22 | 23 | ```js 24 | // src/index.js 25 | import '@esri/calcite-components/dist/components/calcite-button'; 26 | import '@esri/calcite-components/dist/components/calcite-icon'; 27 | import '@esri/calcite-components/dist/components/calcite-date-picker'; 28 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 29 | 30 | setAssetPath(location.href); 31 | ``` 32 | 33 | Using `setAssetPath` will ensure that calcite components look for assets like icons in the correct location (more on copying assets below). 34 | 35 | ## Adding the CSS 36 | 37 | The global calcite components CSS can be added by importing the `calcite.css` file. This will require you set up a css loader in your Webpack config (see [Config > CSS](#css) below): 38 | 39 | ``` 40 | import "@esri/calcite-components/dist/calcite/calcite.css"; 41 | ``` 42 | 43 | ## Config 44 | 45 | Calcite components will need to be copied over to your output folder for Stencil to load them properly from the client. The easiest way to do this is to utilize the [copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/). First install: 46 | 47 | ``` 48 | npm install --save-dev copy-webpack-plugin 49 | ``` 50 | 51 | Then import the plugin in your `webpack.config.js` file and call it inside the `plugins` array: 52 | 53 | ```js 54 | const CopyPlugin = require('copy-webpack-plugin'); 55 | 56 | module.exports = { 57 | plugins: [ 58 | new CopyPlugin({ 59 | patterns: [ 60 | { 61 | from: '**', 62 | context: 'node_modules/@esri/calcite-components/dist/calcite/', 63 | to: './' 64 | } 65 | ] 66 | }) 67 | ] 68 | }; 69 | ``` 70 | 71 | This will ensure the library is available to your JavaScript. 72 | 73 | ### CSS 74 | 75 | While we imported CSS file above, we need to output a CSS file in the final bundle. To do this, you can leverage the [mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/). 76 | 77 | First, install the required plugins and loaders: 78 | 79 | ``` 80 | npm install --save-dev mini-css-extract-plugin css-loader 81 | ``` 82 | 83 | Then add them to your config: 84 | 85 | ``` 86 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 87 | module.exports = { 88 | module: { 89 | rules: [ 90 | { 91 | test: /\.css$/i, 92 | use: [ 93 | MiniCssExtractPlugin.loader, 94 | 'css-loader' 95 | ], 96 | } 97 | ] 98 | }, 99 | } 100 | ``` 101 | 102 | You can see this example projects [webpack.config.js](./webpack.config.js) for a complete config with dev server and html loading. 103 | -------------------------------------------------------------------------------- /angular/README.md: -------------------------------------------------------------------------------- 1 | # Angular 2 | 3 | This examples use [`@esri/calcite-components-angular`](https://www.npmjs.com/package/@esri/calcite-components-angular), which provides Angular wrappers for Calcite Components. 4 | 5 | ## Usage 6 | 7 | ### Install the package 8 | 9 | ```sh 10 | npm install @esri/calcite-components-angular 11 | ``` 12 | 13 | This package includes the compatible version of the main component library as a dependency, so no need to install `@esri/calcite-components` separately. 14 | 15 | ### Copy local assets 16 | 17 | Calcite Components rely on assets being available at a particular path. If using assets locally, you'll need to copy these over to your `src` directory. This example has a `copy` npm script, which will automatically run after installing dependencies. 18 | 19 | ```sh 20 | cp -r node_modules/@esri/calcite-components/dist/calcite/assets/ ./src/assets/ 21 | ``` 22 | 23 | ### Import the stylesheet 24 | 25 | Import the global stylesheet into your app (only do this once): 26 | 27 | ```css 28 | /* src/styles.css */ 29 | @import '@esri/calcite-components/dist/calcite/calcite.css'; 30 | ``` 31 | 32 | ### Define the custom elements 33 | 34 | The Angular wrapper components must use [Calcite Component's Distribution build](https://developers.arcgis.com/calcite-design-system/get-started/#distribution): 35 | 36 | ```ts 37 | // src/main.ts 38 | import { defineCustomElements } from '@esri/calcite-components/dist/loader'; 39 | defineCustomElements(window, { resourcesUrl: './assets' }); 40 | ``` 41 | 42 | ### Use the components 43 | 44 | Add `CalciteComponentsModule` to the imports of your Angular component's module file: 45 | 46 | ```ts 47 | // src/app/app.module.ts 48 | import { NgModule } from '@angular/core'; 49 | import { BrowserModule } from '@angular/platform-browser'; 50 | import { CalciteComponentsModule } from '@esri/calcite-components-angular'; 51 | import { AppComponent } from './app.component'; 52 | 53 | @NgModule({ 54 | declarations: [AppComponent], 55 | imports: [BrowserModule, CalciteComponentsModule], 56 | providers: [], 57 | bootstrap: [AppComponent] 58 | }) 59 | export class AppModule {} 60 | ``` 61 | 62 | Calcite Components can now be used in your application like any other Angular component! 63 | 64 | ```html 65 | 66 | 72 | ``` 73 | 74 | ## License 75 | 76 | COPYRIGHT © 2023 Esri 77 | 78 | All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. 79 | 80 | This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice. 81 | 82 | See use restrictions at 83 | 84 | For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA 85 | 86 | email: 87 | -------------------------------------------------------------------------------- /react/README.md: -------------------------------------------------------------------------------- 1 | # React 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | In the project directory, you can run: 6 | 7 | ```sh 8 | npm install 9 | npm start 10 | ``` 11 | 12 | Runs the app in the development mode.
13 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 14 | 15 | The page will reload if you make edits.
16 | You will also see any lint errors in the console. 17 | 18 | ## Calcite Components with React 19 | 20 | To install [`calcite-components-react`](https://www.npmjs.com/package/@esri/calcite-components-react), run: 21 | 22 | ```sh 23 | npm install --save @esri/calcite-components-react 24 | ``` 25 | 26 | This package includes the compatible version of the main component library as a dependency, so no need to install `@esri/calcite-components` separately. 27 | 28 | ## Use 29 | 30 | [Custom Elements](https://stenciljs.com/docs/custom-elements) is the recommended build when using frontend frameworks, such as React. To use this build, you will need to set the path to the `calcite-components` assets. You can either use local assets, which will be explained in a subsequent step, or assets hosted on a CDN. This example uses local assets. 31 | 32 | ```jsx 33 | import { setAssetPath } from '@esri/calcite-components/dist/components'; 34 | // Local assets 35 | setAssetPath(window.location.href); 36 | 37 | // CDN hosted assets 38 | // setAssetPath("https://unpkg.com/@esri/calcite-components/dist/calcite/assets"); 39 | ``` 40 | 41 | Next, you need to import each component you use from `calcite-components-react`. This will automatically define the custom elements on the browser. 42 | 43 | ```jsx 44 | import { 45 | CalciteButton, 46 | CalciteIcon, 47 | CalciteSlider 48 | } from '@esri/calcite-components-react'; 49 | ``` 50 | 51 | ### Import stylesheet 52 | 53 | Import the global stylesheet into your app (only do this once): 54 | 55 | ```js 56 | import '@esri/calcite-components/dist/calcite/calcite.css'; 57 | ``` 58 | 59 | ### Copy local assets 60 | 61 | Some components (icon, date-picker) rely on assets being available at a particular path. If using assets locally, you'll need to copy these over to your public folder. This example has a `copy` npm script which will automatically run after the `install` script. 62 | 63 | ```sh 64 | cp -r node_modules/@esri/calcite-components/dist/calcite/assets/* ./public/assets/ 65 | ``` 66 | 67 | ## Why not just use the web components directly? 68 | 69 | Because React uses a synthetic event system, the custom events emitted from calcite components won't work with JSX in React. For example, say you want to update some value when the `calcite-slider` component changes. When using the standard web components, you need to save a ref to the element, and add a listener: 70 | 71 | ```jsx 72 | const sliderEl = useRef(null); 73 | const [sliderValue, setSliderValue] = useState(50); 74 | 75 | function onUpdate(event) { 76 | setSliderValue(event.target.value); 77 | } 78 | 79 | // need to access the dom node to set custom event listeners for props that aren't strings / numbers 80 | // https://stenciljs.com/docs/react#properties-and-events 81 | useEffect( 82 | (_) => { 83 | sliderEl.current.addEventListener('calciteSliderUpdate', onUpdate); 84 | }, 85 | [sliderEl] 86 | ); 87 | ``` 88 | 89 | Using `calcite-components-react`, these events are connected for you: 90 | 91 | ```jsx 92 | const [sliderValue, setSliderValue] = useState(50); 93 | setSliderValue(e.target.value)} />; 94 | ``` 95 | 96 | If you're using TypeScript, you'll also get increased type safety for your event listeners, props, etc. 97 | -------------------------------------------------------------------------------- /vue/src/components/TheWelcome.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 122 | -------------------------------------------------------------------------------- /common-patterns/src/components/slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Slider 10 | 14 | 19 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 |
Slider with histogram and color stops:
54 | 55 |
56 | 64 | 65 |
66 |
67 |
68 |
69 | Slider with histogram, color stops, and precise range: 70 |
71 | 72 |
73 | 86 | 87 |
88 |
89 | 90 | 91 | 92 | 126 | 127 | 128 | 166 | 167 | -------------------------------------------------------------------------------- /ember/README.md: -------------------------------------------------------------------------------- 1 | # Ember 4 2 | 3 | This is an example of how to use [@esri/calcite-components](https://github.com/Esri/calcite-components/) in an Ember 4 application. 4 | 5 | ## Prerequisites 6 | 7 | You will need the following things properly installed on your computer. 8 | 9 | - [Git](https://git-scm.com/) 10 | - [Node.js](https://nodejs.org/) (with npm) 11 | - [Ember CLI](https://cli.emberjs.com/release/) 12 | - [Google Chrome](https://google.com/chrome/) 13 | 14 | ## Installation 15 | 16 | - `git clone ` this repository 17 | - `cd ember` 18 | - `npm install` 19 | 20 | ## Running / Development 21 | 22 | - `ember serve` 23 | - Visit your app at [http://localhost:4200](http://localhost:4200). 24 | - Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests). 25 | 26 | ### Code Generators 27 | 28 | Make use of the many generators for code, try `ember help generate` for more details 29 | 30 | ### Running Tests 31 | 32 | - `ember test` 33 | - `ember test --server` 34 | 35 | ### Linting 36 | 37 | - `npm run lint` 38 | - `npm run lint:fix` 39 | 40 | ### Building 41 | 42 | - `ember build` (development) 43 | - `ember build --environment production` (production) 44 | 45 | ### Deploying 46 | 47 | Specify what it takes to deploy your app. 48 | 49 | ## Further Reading / Useful Links 50 | 51 | - [ember.js](https://emberjs.com/) 52 | - [ember-cli](https://cli.emberjs.com/release/) 53 | - Development Browser Extensions 54 | - [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) 55 | - [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/) 56 | 57 | ## Calcite Components with Ember 4 58 | 59 | ### Installing Calcite Components 60 | 61 | To install calcite components in your current project or in a new project: 62 | 63 | ``` 64 | npm i @esri/calcite-components --save-dev 65 | ``` 66 | 67 | ### Dependencies 68 | 69 | #### ember-auto-import 70 | 71 | There is a dependency on `ember-auto-import`. With the most recent version of Ember 4, this package is part of the initial project definition. Verify that this package is already part of your project, if not then install it. 72 | 73 | `ember i ember-auto-import` 74 | 75 | ember-auto-import will automatically import calcite components inside the build when it finds an import reference in your code (see next section). 76 | 77 | Most of the time, ember-auto-import doesn't require configuration. It should just work for calcite-components. 78 | 79 | #### broccoli-funnel 80 | 81 | broccoli-funnel is used to copy files during the build. 82 | 83 | `npm i broccoli-funnel --save-dev` 84 | 85 | ### Initializing calcite components when the app starts 86 | 87 | The best place to define the calcite-components is in an initializer. 88 | 89 | `ember generate initializer calcite-components` 90 | 91 | ```js 92 | // src/initializers/calcite-components.js 93 | import { defineCustomElements } from '@esri/calcite-components/dist/loader'; 94 | 95 | defineCustomElements(window, { 96 | resourcesUrl: 'assets/calcite/', 97 | }); 98 | 99 | export function initialize() {} 100 | 101 | export default { 102 | initialize, 103 | }; 104 | ``` 105 | 106 | This is basically a no-op initializer from an ember point of view. However, it allows: 107 | 108 | - to reference `@esri/calcite-components/dist/loader`. It will allow ember-auto-import to discover the reference and use webpack to build the calcite components into the the app. This is used at build time. 109 | - define the calcite components inside `window` when the app starts. This is used at runtime. 110 | 111 | ### Adding the calcite CSS and assets 112 | 113 | The ember build needs to be updated to import the calcite css and copy in the build the calcite assets. 114 | 115 | The `ember-cli-build.js` file needs to be updated to include: 116 | 117 | ```js 118 | const EmberApp = require('ember-cli/lib/broccoli/ember-app'); 119 | const { Funnel } = require('broccoli-funnel'); 120 | 121 | module.exports = function (defaults) { 122 | const app = new EmberApp(defaults, {}); 123 | 124 | // Import the calcite style sheet inside the app css 125 | app.import('node_modules/@esri/calcite-components/dist/calcite/calcite.css'); 126 | 127 | // Funnel the static assets into the build assets directory 128 | const calciteAssetsTree = new Funnel( 129 | './node_modules/@esri/calcite-components/dist', 130 | { 131 | srcDir: '/', 132 | include: ['calcite/assets/**/*'], 133 | destDir: '/assets', 134 | } 135 | ); 136 | 137 | return app.toTree([calciteAssetsTree]); 138 | }; 139 | ``` 140 | -------------------------------------------------------------------------------- /common-patterns/src/components/flow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Flow 10 | 14 | 19 | 20 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 67 | 68 | 72 | 76 | 80 | 84 | 85 | 86 | 87 | 88 | 89 | 140 | 141 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Calcite Components Examples 2 | 3 | > [!IMPORTANT] 4 | > Updated versions of these examples are now [included](https://github.com/Esri/calcite-design-system/tree/dev/examples/components) in the Calcite Design System monorepo. 5 | 6 | Working example applications utilizing [Calcite Design System](https://github.com/Esri/calcite-design-system). Each folder within this repository is its own mini application demonstrating integration of Calcite Components with other technologies and tooling. 7 | 8 | Most frameworks provide a CLI tool to quickly start up a repo. If available, these tools are used to create the examples to ensure they are colloquial to the framework in question. After a starter project is scaffolded up, calcite-components are installed and some general steps are taken: 9 | 10 | 1. Include Calcite Components' loader and define the custom elements 11 | 2. Pull in Calcite Components' global CSS file (provides theming variables, etc) 12 | 3. Ensure Calcite Components' assets get copied into the project (allows the `calcite-icon` component to work) 13 | 14 | This repository will change over time as new best-practices are established and framework integrations are improved. 15 | 16 | **Troubleshooting** 17 | 18 | To troubleshoot an error or issue with the examples, please visit [Esri Support](https://support.esri.com/en/contact-tech-support), or visit [Calcite's Community](https://community.esri.com/t5/calcite-design-system/ct-p/calcite-design-system) to ask questions, share ideas, and collaborate with other community members on Calcite Design System. 19 | 20 | To report bugs or request enhancements, navigate to [Calcite Design System's GitHub repository](https://github.com/Esri/calcite-design-system/issues/new/choose). 21 | 22 | ## Angular 23 | 24 | The [Angular example](./angular/) was built using the `@angular/cli` package: 25 | 26 | ``` 27 | npm install -g @angular/cli 28 | ng new [NAME] 29 | ``` 30 | 31 | ## Ember 32 | 33 | The [ember app](./ember/) used the `ember-cli` package to get started: 34 | 35 | ``` 36 | npm install -g ember-cli 37 | ember new [NAME] 38 | ``` 39 | 40 | ## React 41 | 42 | The [example react app](./react/) was created using the `create-react-app` utility: 43 | 44 | ``` 45 | npx create-react-app [NAME] 46 | ``` 47 | 48 | ## Preact 49 | 50 | The [example preact app](./preact-typescript/) was created using the `preact create` utility: 51 | 52 | ``` 53 | npm install -g preact-cli 54 | preact create typescript [NAME] 55 | ``` 56 | 57 | This example also uses TypeScript, and provides additional instructions for getting calcite components to work inside a TypeScript + Preact environment. 58 | 59 | ## Vue 60 | 61 | The [Vue.js example](./vue/) was built using the `cli-service-global` package: 62 | 63 | ``` 64 | npm install -g @vue/cli 65 | vue create [NAME] 66 | ``` 67 | 68 | ## Rollup 69 | 70 | The [Rollup example](./rollup/) was generated with [rollup-starter-app](https://github.com/rollup/rollup-starter-app): 71 | 72 | ``` 73 | npx degit "rollup/rollup-starter-app" [NAME] 74 | ``` 75 | 76 | ## Webpack 77 | 78 | The [Webpack example](./webpack/) was built from scratch using Webpack 4.x. 79 | 80 | ## Visual Studio IntelliSense 81 | 82 | Calcite supports IntelliSense in Visual Studio Code. You can quickly add components and their attributes or properties in the Visual Studio Code editor, where accompanying documentation will help you along the way. 83 | 84 | ![Calcite IntelliSense in Visual Studio Code](https://user-images.githubusercontent.com/5023024/213829317-32f534fd-6f37-4c10-aa24-f402056ef939.gif) 85 | 86 | To setup IntelliSense, add the following to the `.vscode/settings.json` file in your project: 87 | 88 | ```json 89 | "html.customData": [ 90 | "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" 91 | ] 92 | ``` 93 | 94 | For more detailed information on IntelliSense, visit the [Visual Studio Code IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) documentation. 95 | 96 | ## License 97 | 98 | COPYRIGHT © 2024 Esri 99 | 100 | All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. 101 | 102 | This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice. 103 | 104 | See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english 105 | 106 | For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA 107 | 108 | email: contracts@esri.com 109 | -------------------------------------------------------------------------------- /react/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then((registration) => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch((error) => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' } 105 | }) 106 | .then((response) => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then((registration) => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then((registration) => { 135 | registration.unregister(); 136 | }) 137 | .catch((error) => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /preact-typescript/size-plugin.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "timestamp": 1674680263001, 4 | "files": [ 5 | { 6 | "filename": "0.chunk.*****.esm.js", 7 | "previous": 3330, 8 | "size": 3330, 9 | "diff": 0 10 | }, 11 | { 12 | "filename": "1.chunk.*****.esm.js", 13 | "previous": 9146, 14 | "size": 9146, 15 | "diff": 0 16 | }, 17 | { 18 | "filename": "2.chunk.*****.esm.js", 19 | "previous": 6837, 20 | "size": 6837, 21 | "diff": 0 22 | }, 23 | { 24 | "filename": "3.chunk.*****.esm.js", 25 | "previous": 5154, 26 | "size": 5154, 27 | "diff": 0 28 | }, 29 | { 30 | "filename": "4.chunk.*****.esm.js", 31 | "previous": 5842, 32 | "size": 5842, 33 | "diff": 0 34 | }, 35 | { 36 | "filename": "5.chunk.*****.esm.js", 37 | "previous": 12521, 38 | "size": 12521, 39 | "diff": 0 40 | }, 41 | { 42 | "filename": "bundle.2da31.css", 43 | "previous": 1839, 44 | "size": 1839, 45 | "diff": 0 46 | }, 47 | { 48 | "filename": "bundle.*****.esm.js", 49 | "previous": 22572, 50 | "size": 22572, 51 | "diff": 0 52 | }, 53 | { 54 | "filename": "polyfills.*****.esm.js", 55 | "previous": 2317, 56 | "size": 2317, 57 | "diff": 0 58 | }, 59 | { 60 | "filename": "polyfills-core-js.chunk.*****.esm.js", 61 | "previous": 30937, 62 | "size": 30937, 63 | "diff": 0 64 | }, 65 | { 66 | "filename": "polyfills-dom.chunk.*****.esm.js", 67 | "previous": 5641, 68 | "size": 5641, 69 | "diff": 0 70 | }, 71 | { 72 | "filename": "route-home.chunk.352ef.css", 73 | "previous": 375, 74 | "size": 375, 75 | "diff": 0 76 | }, 77 | { 78 | "filename": "route-home.chunk.*****.esm.js", 79 | "previous": 437, 80 | "size": 436, 81 | "diff": -1 82 | }, 83 | { 84 | "filename": "route-profile.chunk.*****.esm.js", 85 | "previous": 1356, 86 | "size": 1356, 87 | "diff": 0 88 | }, 89 | { 90 | "filename": "12.chunk.*****.esm.js", 91 | "previous": 7290, 92 | "size": 7290, 93 | "diff": 0 94 | }, 95 | { 96 | "filename": "13.chunk.*****.esm.js", 97 | "previous": 20787, 98 | "size": 20787, 99 | "diff": 0 100 | }, 101 | { 102 | "filename": "14.chunk.*****.esm.js", 103 | "previous": 6096, 104 | "size": 6096, 105 | "diff": 0 106 | }, 107 | { 108 | "filename": "15.chunk.*****.esm.js", 109 | "previous": 6842, 110 | "size": 6842, 111 | "diff": 0 112 | }, 113 | { 114 | "filename": "16.chunk.*****.esm.js", 115 | "previous": 10286, 116 | "size": 10286, 117 | "diff": 0 118 | }, 119 | { 120 | "filename": "17.chunk.*****.esm.js", 121 | "previous": 11361, 122 | "size": 11361, 123 | "diff": 0 124 | }, 125 | { 126 | "filename": "18.chunk.*****.esm.js", 127 | "previous": 9271, 128 | "size": 9271, 129 | "diff": 0 130 | }, 131 | { 132 | "filename": "19.chunk.*****.esm.js", 133 | "previous": 11742, 134 | "size": 11742, 135 | "diff": 0 136 | }, 137 | { 138 | "filename": "20.chunk.*****.esm.js", 139 | "previous": 9707, 140 | "size": 9707, 141 | "diff": 0 142 | }, 143 | { 144 | "filename": "21.chunk.*****.esm.js", 145 | "previous": 8606, 146 | "size": 8606, 147 | "diff": 0 148 | }, 149 | { 150 | "filename": "22.chunk.*****.esm.js", 151 | "previous": 11131, 152 | "size": 11131, 153 | "diff": 0 154 | }, 155 | { 156 | "filename": "23.chunk.*****.esm.js", 157 | "previous": 7601, 158 | "size": 7601, 159 | "diff": 0 160 | }, 161 | { 162 | "filename": "24.chunk.*****.esm.js", 163 | "previous": 7254, 164 | "size": 7254, 165 | "diff": 0 166 | }, 167 | { 168 | "filename": "25.chunk.*****.esm.js", 169 | "previous": 12084, 170 | "size": 12084, 171 | "diff": 0 172 | }, 173 | { 174 | "filename": "26.chunk.*****.esm.js", 175 | "previous": 4922, 176 | "size": 4922, 177 | "diff": 0 178 | }, 179 | { 180 | "filename": "27.chunk.*****.esm.js", 181 | "previous": 7682, 182 | "size": 7682, 183 | "diff": 0 184 | }, 185 | { 186 | "filename": "28.chunk.*****.esm.js", 187 | "previous": 5460, 188 | "size": 5460, 189 | "diff": 0 190 | }, 191 | { 192 | "filename": "29.chunk.*****.esm.js", 193 | "previous": 6289, 194 | "size": 6289, 195 | "diff": 0 196 | }, 197 | { 198 | "filename": "30.chunk.*****.esm.js", 199 | "previous": 5848, 200 | "size": 5848, 201 | "diff": 0 202 | }, 203 | { 204 | "filename": "31.chunk.*****.esm.js", 205 | "previous": 6591, 206 | "size": 6591, 207 | "diff": 0 208 | }, 209 | { 210 | "filename": "32.chunk.*****.esm.js", 211 | "previous": 6313, 212 | "size": 6313, 213 | "diff": 0 214 | }, 215 | { 216 | "filename": "33.chunk.*****.esm.js", 217 | "previous": 5984, 218 | "size": 5984, 219 | "diff": 0 220 | }, 221 | { 222 | "filename": "34.chunk.*****.esm.js", 223 | "previous": 7716, 224 | "size": 7716, 225 | "diff": 0 226 | }, 227 | { 228 | "filename": "35.chunk.*****.esm.js", 229 | "previous": 4111, 230 | "size": 4111, 231 | "diff": 0 232 | }, 233 | { 234 | "filename": "36.chunk.*****.esm.js", 235 | "previous": 5481, 236 | "size": 5481, 237 | "diff": 0 238 | }, 239 | { 240 | "filename": "37.chunk.*****.esm.js", 241 | "previous": 3571, 242 | "size": 3571, 243 | "diff": 0 244 | }, 245 | { 246 | "filename": "38.chunk.*****.esm.js", 247 | "previous": 6711, 248 | "size": 6711, 249 | "diff": 0 250 | }, 251 | { 252 | "filename": "39.chunk.*****.esm.js", 253 | "previous": 4689, 254 | "size": 4689, 255 | "diff": 0 256 | }, 257 | { 258 | "filename": "40.chunk.*****.esm.js", 259 | "previous": 6776, 260 | "size": 6776, 261 | "diff": 0 262 | }, 263 | { 264 | "filename": "41.chunk.*****.esm.js", 265 | "previous": 3455, 266 | "size": 3455, 267 | "diff": 0 268 | }, 269 | { 270 | "filename": "42.chunk.*****.esm.js", 271 | "previous": 2715, 272 | "size": 2715, 273 | "diff": 0 274 | }, 275 | { 276 | "filename": "43.chunk.*****.esm.js", 277 | "previous": 5720, 278 | "size": 5720, 279 | "diff": 0 280 | }, 281 | { 282 | "filename": "44.chunk.*****.esm.js", 283 | "previous": 5424, 284 | "size": 5424, 285 | "diff": 0 286 | }, 287 | { 288 | "filename": "45.chunk.*****.esm.js", 289 | "previous": 4377, 290 | "size": 4377, 291 | "diff": 0 292 | }, 293 | { 294 | "filename": "46.chunk.*****.esm.js", 295 | "previous": 4402, 296 | "size": 4402, 297 | "diff": 0 298 | }, 299 | { 300 | "filename": "47.chunk.*****.esm.js", 301 | "previous": 5598, 302 | "size": 5598, 303 | "diff": 0 304 | }, 305 | { 306 | "filename": "48.chunk.*****.esm.js", 307 | "previous": 4330, 308 | "size": 4330, 309 | "diff": 0 310 | }, 311 | { 312 | "filename": "49.chunk.*****.esm.js", 313 | "previous": 9440, 314 | "size": 9440, 315 | "diff": 0 316 | }, 317 | { 318 | "filename": "50.chunk.*****.esm.js", 319 | "previous": 2776, 320 | "size": 2776, 321 | "diff": 0 322 | }, 323 | { 324 | "filename": "51.chunk.*****.esm.js", 325 | "previous": 2200, 326 | "size": 2200, 327 | "diff": 0 328 | }, 329 | { 330 | "filename": "52.chunk.*****.esm.js", 331 | "previous": 3313, 332 | "size": 3313, 333 | "diff": 0 334 | }, 335 | { 336 | "filename": "53.chunk.*****.esm.js", 337 | "previous": 1499, 338 | "size": 1499, 339 | "diff": 0 340 | }, 341 | { 342 | "filename": "54.chunk.*****.esm.js", 343 | "previous": 2933, 344 | "size": 2933, 345 | "diff": 0 346 | }, 347 | { 348 | "filename": "55.chunk.*****.esm.js", 349 | "previous": 1956, 350 | "size": 1956, 351 | "diff": 0 352 | }, 353 | { 354 | "filename": "56.chunk.*****.esm.js", 355 | "previous": 4677, 356 | "size": 4677, 357 | "diff": 0 358 | }, 359 | { 360 | "filename": "57.chunk.*****.esm.js", 361 | "previous": 5260, 362 | "size": 5260, 363 | "diff": 0 364 | }, 365 | { 366 | "filename": "58.chunk.*****.esm.js", 367 | "previous": 4089, 368 | "size": 4089, 369 | "diff": 0 370 | }, 371 | { 372 | "filename": "59.chunk.*****.esm.js", 373 | "previous": 2110, 374 | "size": 2110, 375 | "diff": 0 376 | }, 377 | { 378 | "filename": "60.chunk.*****.esm.js", 379 | "previous": 1630, 380 | "size": 1630, 381 | "diff": 0 382 | }, 383 | { 384 | "filename": "61.chunk.*****.esm.js", 385 | "previous": 1297, 386 | "size": 1297, 387 | "diff": 0 388 | }, 389 | { 390 | "filename": "62.chunk.*****.esm.js", 391 | "previous": 1837, 392 | "size": 1837, 393 | "diff": 0 394 | }, 395 | { 396 | "filename": "63.chunk.*****.esm.js", 397 | "previous": 1905, 398 | "size": 1905, 399 | "diff": 0 400 | }, 401 | { 402 | "filename": "64.chunk.*****.esm.js", 403 | "previous": 2620, 404 | "size": 2620, 405 | "diff": 0 406 | }, 407 | { 408 | "filename": "65.chunk.*****.esm.js", 409 | "previous": 1379, 410 | "size": 1379, 411 | "diff": 0 412 | }, 413 | { 414 | "filename": "66.chunk.*****.esm.js", 415 | "previous": 2078, 416 | "size": 2078, 417 | "diff": 0 418 | }, 419 | { 420 | "filename": "67.chunk.*****.esm.js", 421 | "previous": 1253, 422 | "size": 1253, 423 | "diff": 0 424 | }, 425 | { 426 | "filename": "68.chunk.*****.esm.js", 427 | "previous": 1109, 428 | "size": 1109, 429 | "diff": 0 430 | }, 431 | { 432 | "filename": "69.chunk.*****.esm.js", 433 | "previous": 1471, 434 | "size": 1471, 435 | "diff": 0 436 | }, 437 | { 438 | "filename": "70.chunk.*****.esm.js", 439 | "previous": 2845, 440 | "size": 2845, 441 | "diff": 0 442 | }, 443 | { 444 | "filename": "71.chunk.*****.esm.js", 445 | "previous": 3599, 446 | "size": 3599, 447 | "diff": 0 448 | }, 449 | { 450 | "filename": "72.chunk.*****.esm.js", 451 | "previous": 2900, 452 | "size": 2900, 453 | "diff": 0 454 | }, 455 | { "filename": "sw-esm.js", "previous": 12065, "size": 12068, "diff": 3 }, 456 | { "filename": "sw.js", "previous": 12047, "size": 12047, "diff": 0 }, 457 | { 458 | "filename": "0.chunk.6c8ea.js", 459 | "previous": 3772, 460 | "size": 3772, 461 | "diff": 0 462 | }, 463 | { 464 | "filename": "1.chunk.0be4d.js", 465 | "previous": 5004, 466 | "size": 5004, 467 | "diff": 0 468 | }, 469 | { 470 | "filename": "2.chunk.455ca.js", 471 | "previous": 10259, 472 | "size": 10259, 473 | "diff": 0 474 | }, 475 | { 476 | "filename": "3.chunk.854b1.js", 477 | "previous": 5152, 478 | "size": 5152, 479 | "diff": 0 480 | }, 481 | { 482 | "filename": "4.chunk.a9f06.js", 483 | "previous": 3035, 484 | "size": 3035, 485 | "diff": 0 486 | }, 487 | { 488 | "filename": "5.chunk.ff101.js", 489 | "previous": 12332, 490 | "size": 12332, 491 | "diff": 0 492 | }, 493 | { 494 | "filename": "bundle.3f5bc.js", 495 | "previous": 24204, 496 | "size": 0, 497 | "diff": -24204 498 | }, 499 | { 500 | "filename": "polyfills.abd84.js", 501 | "previous": 2415, 502 | "size": 2415, 503 | "diff": 0 504 | }, 505 | { 506 | "filename": "polyfills-core-js.chunk.dbc1e.js", 507 | "previous": 31203, 508 | "size": 31203, 509 | "diff": 0 510 | }, 511 | { 512 | "filename": "polyfills-dom.chunk.01eee.js", 513 | "previous": 5636, 514 | "size": 5636, 515 | "diff": 0 516 | }, 517 | { 518 | "filename": "route-home.chunk.0d73d.js", 519 | "previous": 441, 520 | "size": 0, 521 | "diff": -441 522 | }, 523 | { 524 | "filename": "route-profile.chunk.e2fc3.js", 525 | "previous": 1876, 526 | "size": 1876, 527 | "diff": 0 528 | }, 529 | { 530 | "filename": "12.chunk.521bd.js", 531 | "previous": 14442, 532 | "size": 14442, 533 | "diff": 0 534 | }, 535 | { 536 | "filename": "13.chunk.b2760.js", 537 | "previous": 11675, 538 | "size": 11675, 539 | "diff": 0 540 | }, 541 | { 542 | "filename": "14.chunk.e0c88.js", 543 | "previous": 5493, 544 | "size": 5493, 545 | "diff": 0 546 | }, 547 | { 548 | "filename": "15.chunk.077e7.js", 549 | "previous": 12564, 550 | "size": 12564, 551 | "diff": 0 552 | }, 553 | { 554 | "filename": "16.chunk.19be6.js", 555 | "previous": 20060, 556 | "size": 20060, 557 | "diff": 0 558 | }, 559 | { 560 | "filename": "17.chunk.86527.js", 561 | "previous": 5155, 562 | "size": 5155, 563 | "diff": 0 564 | }, 565 | { 566 | "filename": "18.chunk.57fac.js", 567 | "previous": 4169, 568 | "size": 4169, 569 | "diff": 0 570 | }, 571 | { 572 | "filename": "19.chunk.4ce7f.js", 573 | "previous": 4435, 574 | "size": 4435, 575 | "diff": 0 576 | }, 577 | { 578 | "filename": "20.chunk.3fb13.js", 579 | "previous": 4682, 580 | "size": 4682, 581 | "diff": 0 582 | }, 583 | { 584 | "filename": "21.chunk.f11db.js", 585 | "previous": 4082, 586 | "size": 4082, 587 | "diff": 0 588 | }, 589 | { 590 | "filename": "22.chunk.c8ad9.js", 591 | "previous": 8092, 592 | "size": 8092, 593 | "diff": 0 594 | }, 595 | { 596 | "filename": "23.chunk.4dc48.js", 597 | "previous": 9234, 598 | "size": 9234, 599 | "diff": 0 600 | }, 601 | { 602 | "filename": "24.chunk.b4c6c.js", 603 | "previous": 8281, 604 | "size": 8281, 605 | "diff": 0 606 | }, 607 | { 608 | "filename": "25.chunk.77227.js", 609 | "previous": 5818, 610 | "size": 5818, 611 | "diff": 0 612 | }, 613 | { 614 | "filename": "26.chunk.cec44.js", 615 | "previous": 8536, 616 | "size": 8536, 617 | "diff": 0 618 | }, 619 | { 620 | "filename": "27.chunk.c3219.js", 621 | "previous": 3964, 622 | "size": 3964, 623 | "diff": 0 624 | }, 625 | { 626 | "filename": "28.chunk.a6fd4.js", 627 | "previous": 3264, 628 | "size": 3264, 629 | "diff": 0 630 | }, 631 | { 632 | "filename": "29.chunk.fe79e.js", 633 | "previous": 6751, 634 | "size": 6751, 635 | "diff": 0 636 | }, 637 | { 638 | "filename": "30.chunk.8c41a.js", 639 | "previous": 7308, 640 | "size": 7308, 641 | "diff": 0 642 | }, 643 | { 644 | "filename": "31.chunk.53345.js", 645 | "previous": 6132, 646 | "size": 6132, 647 | "diff": 0 648 | }, 649 | { 650 | "filename": "32.chunk.c8384.js", 651 | "previous": 9445, 652 | "size": 9445, 653 | "diff": 0 654 | }, 655 | { 656 | "filename": "33.chunk.ad764.js", 657 | "previous": 5238, 658 | "size": 5238, 659 | "diff": 0 660 | }, 661 | { 662 | "filename": "34.chunk.723d6.js", 663 | "previous": 4923, 664 | "size": 4923, 665 | "diff": 0 666 | }, 667 | { 668 | "filename": "35.chunk.f4d01.js", 669 | "previous": 7455, 670 | "size": 7455, 671 | "diff": 0 672 | }, 673 | { 674 | "filename": "36.chunk.49c16.js", 675 | "previous": 5494, 676 | "size": 5494, 677 | "diff": 0 678 | }, 679 | { 680 | "filename": "37.chunk.6eeeb.js", 681 | "previous": 10420, 682 | "size": 10420, 683 | "diff": 0 684 | }, 685 | { 686 | "filename": "38.chunk.86b58.js", 687 | "previous": 2934, 688 | "size": 2934, 689 | "diff": 0 690 | }, 691 | { 692 | "filename": "39.chunk.af2c4.js", 693 | "previous": 5609, 694 | "size": 5609, 695 | "diff": 0 696 | }, 697 | { 698 | "filename": "40.chunk.506ea.js", 699 | "previous": 2867, 700 | "size": 2867, 701 | "diff": 0 702 | }, 703 | { 704 | "filename": "41.chunk.fac9a.js", 705 | "previous": 3721, 706 | "size": 3721, 707 | "diff": 0 708 | }, 709 | { 710 | "filename": "42.chunk.af1b1.js", 711 | "previous": 3861, 712 | "size": 3861, 713 | "diff": 0 714 | }, 715 | { 716 | "filename": "43.chunk.e1863.js", 717 | "previous": 3364, 718 | "size": 3364, 719 | "diff": 0 720 | }, 721 | { 722 | "filename": "44.chunk.85b38.js", 723 | "previous": 3827, 724 | "size": 3827, 725 | "diff": 0 726 | }, 727 | { 728 | "filename": "45.chunk.0c5fa.js", 729 | "previous": 4611, 730 | "size": 4611, 731 | "diff": 0 732 | }, 733 | { 734 | "filename": "46.chunk.15621.js", 735 | "previous": 4893, 736 | "size": 4893, 737 | "diff": 0 738 | }, 739 | { 740 | "filename": "47.chunk.b141b.js", 741 | "previous": 5063, 742 | "size": 5063, 743 | "diff": 0 744 | }, 745 | { 746 | "filename": "48.chunk.3ad11.js", 747 | "previous": 3749, 748 | "size": 3749, 749 | "diff": 0 750 | }, 751 | { 752 | "filename": "49.chunk.03d20.js", 753 | "previous": 4072, 754 | "size": 4072, 755 | "diff": 0 756 | }, 757 | { 758 | "filename": "50.chunk.15b85.js", 759 | "previous": 2039, 760 | "size": 2039, 761 | "diff": 0 762 | }, 763 | { 764 | "filename": "51.chunk.f5285.js", 765 | "previous": 2527, 766 | "size": 2527, 767 | "diff": 0 768 | }, 769 | { 770 | "filename": "52.chunk.48663.js", 771 | "previous": 6120, 772 | "size": 6120, 773 | "diff": 0 774 | }, 775 | { 776 | "filename": "53.chunk.be440.js", 777 | "previous": 5802, 778 | "size": 5802, 779 | "diff": 0 780 | }, 781 | { 782 | "filename": "54.chunk.f626b.js", 783 | "previous": 6922, 784 | "size": 6922, 785 | "diff": 0 786 | }, 787 | { 788 | "filename": "55.chunk.61af5.js", 789 | "previous": 4622, 790 | "size": 4622, 791 | "diff": 0 792 | }, 793 | { 794 | "filename": "56.chunk.71cfd.js", 795 | "previous": 2971, 796 | "size": 2971, 797 | "diff": 0 798 | }, 799 | { 800 | "filename": "57.chunk.0ee2f.js", 801 | "previous": 3528, 802 | "size": 3528, 803 | "diff": 0 804 | }, 805 | { 806 | "filename": "58.chunk.59e13.js", 807 | "previous": 2781, 808 | "size": 2781, 809 | "diff": 0 810 | }, 811 | { 812 | "filename": "59.chunk.12798.js", 813 | "previous": 1880, 814 | "size": 1880, 815 | "diff": 0 816 | }, 817 | { 818 | "filename": "60.chunk.e3dda.js", 819 | "previous": 3034, 820 | "size": 3034, 821 | "diff": 0 822 | }, 823 | { 824 | "filename": "61.chunk.dbc6b.js", 825 | "previous": 2266, 826 | "size": 2266, 827 | "diff": 0 828 | }, 829 | { 830 | "filename": "62.chunk.4272f.js", 831 | "previous": 2794, 832 | "size": 2794, 833 | "diff": 0 834 | }, 835 | { 836 | "filename": "63.chunk.38351.js", 837 | "previous": 2325, 838 | "size": 2325, 839 | "diff": 0 840 | }, 841 | { 842 | "filename": "64.chunk.7072b.js", 843 | "previous": 2729, 844 | "size": 2729, 845 | "diff": 0 846 | }, 847 | { 848 | "filename": "65.chunk.e98ae.js", 849 | "previous": 2509, 850 | "size": 2509, 851 | "diff": 0 852 | }, 853 | { 854 | "filename": "66.chunk.323db.js", 855 | "previous": 1638, 856 | "size": 1638, 857 | "diff": 0 858 | }, 859 | { 860 | "filename": "67.chunk.5fb4f.js", 861 | "previous": 2823, 862 | "size": 2823, 863 | "diff": 0 864 | }, 865 | { 866 | "filename": "68.chunk.ffd54.js", 867 | "previous": 1481, 868 | "size": 1481, 869 | "diff": 0 870 | }, 871 | { 872 | "filename": "69.chunk.8fb37.js", 873 | "previous": 1663, 874 | "size": 1663, 875 | "diff": 0 876 | }, 877 | { 878 | "filename": "70.chunk.e624d.js", 879 | "previous": 3497, 880 | "size": 3497, 881 | "diff": 0 882 | }, 883 | { 884 | "filename": "71.chunk.6ca47.js", 885 | "previous": 4249, 886 | "size": 4249, 887 | "diff": 0 888 | }, 889 | { 890 | "filename": "72.chunk.dff99.js", 891 | "previous": 3207, 892 | "size": 3207, 893 | "diff": 0 894 | }, 895 | { "filename": "index.html", "previous": 1367, "size": 1367, "diff": 0 }, 896 | { "filename": "200.html", "previous": 1367, "size": 1367, "diff": 0 }, 897 | { 898 | "filename": "bundle.46af7.js", 899 | "previous": 0, 900 | "size": 24205, 901 | "diff": 24205 902 | }, 903 | { 904 | "filename": "route-home.chunk.57dd4.js", 905 | "previous": 0, 906 | "size": 441, 907 | "diff": 441 908 | } 909 | ] 910 | }, 911 | { 912 | "timestamp": 1674680031697, 913 | "files": [ 914 | { 915 | "filename": "0.chunk.*****.esm.js", 916 | "previous": 0, 917 | "size": 3330, 918 | "diff": 3330 919 | }, 920 | { 921 | "filename": "1.chunk.*****.esm.js", 922 | "previous": 0, 923 | "size": 9146, 924 | "diff": 9146 925 | }, 926 | { 927 | "filename": "2.chunk.*****.esm.js", 928 | "previous": 0, 929 | "size": 6837, 930 | "diff": 6837 931 | }, 932 | { 933 | "filename": "3.chunk.*****.esm.js", 934 | "previous": 0, 935 | "size": 5154, 936 | "diff": 5154 937 | }, 938 | { 939 | "filename": "4.chunk.*****.esm.js", 940 | "previous": 0, 941 | "size": 5842, 942 | "diff": 5842 943 | }, 944 | { 945 | "filename": "5.chunk.*****.esm.js", 946 | "previous": 0, 947 | "size": 12521, 948 | "diff": 12521 949 | }, 950 | { 951 | "filename": "bundle.2da31.css", 952 | "previous": 0, 953 | "size": 1839, 954 | "diff": 1839 955 | }, 956 | { 957 | "filename": "bundle.*****.esm.js", 958 | "previous": 0, 959 | "size": 22572, 960 | "diff": 22572 961 | }, 962 | { 963 | "filename": "polyfills.*****.esm.js", 964 | "previous": 0, 965 | "size": 2317, 966 | "diff": 2317 967 | }, 968 | { 969 | "filename": "polyfills-core-js.chunk.*****.esm.js", 970 | "previous": 0, 971 | "size": 30937, 972 | "diff": 30937 973 | }, 974 | { 975 | "filename": "polyfills-dom.chunk.*****.esm.js", 976 | "previous": 0, 977 | "size": 5641, 978 | "diff": 5641 979 | }, 980 | { 981 | "filename": "route-home.chunk.352ef.css", 982 | "previous": 0, 983 | "size": 375, 984 | "diff": 375 985 | }, 986 | { 987 | "filename": "route-home.chunk.*****.esm.js", 988 | "previous": 0, 989 | "size": 437, 990 | "diff": 437 991 | }, 992 | { 993 | "filename": "route-profile.chunk.*****.esm.js", 994 | "previous": 0, 995 | "size": 1356, 996 | "diff": 1356 997 | }, 998 | { 999 | "filename": "12.chunk.*****.esm.js", 1000 | "previous": 0, 1001 | "size": 7290, 1002 | "diff": 7290 1003 | }, 1004 | { 1005 | "filename": "13.chunk.*****.esm.js", 1006 | "previous": 0, 1007 | "size": 20787, 1008 | "diff": 20787 1009 | }, 1010 | { 1011 | "filename": "14.chunk.*****.esm.js", 1012 | "previous": 0, 1013 | "size": 6096, 1014 | "diff": 6096 1015 | }, 1016 | { 1017 | "filename": "15.chunk.*****.esm.js", 1018 | "previous": 0, 1019 | "size": 6842, 1020 | "diff": 6842 1021 | }, 1022 | { 1023 | "filename": "16.chunk.*****.esm.js", 1024 | "previous": 0, 1025 | "size": 10286, 1026 | "diff": 10286 1027 | }, 1028 | { 1029 | "filename": "17.chunk.*****.esm.js", 1030 | "previous": 0, 1031 | "size": 11361, 1032 | "diff": 11361 1033 | }, 1034 | { 1035 | "filename": "18.chunk.*****.esm.js", 1036 | "previous": 0, 1037 | "size": 9271, 1038 | "diff": 9271 1039 | }, 1040 | { 1041 | "filename": "19.chunk.*****.esm.js", 1042 | "previous": 0, 1043 | "size": 11742, 1044 | "diff": 11742 1045 | }, 1046 | { 1047 | "filename": "20.chunk.*****.esm.js", 1048 | "previous": 0, 1049 | "size": 9707, 1050 | "diff": 9707 1051 | }, 1052 | { 1053 | "filename": "21.chunk.*****.esm.js", 1054 | "previous": 0, 1055 | "size": 8606, 1056 | "diff": 8606 1057 | }, 1058 | { 1059 | "filename": "22.chunk.*****.esm.js", 1060 | "previous": 0, 1061 | "size": 11131, 1062 | "diff": 11131 1063 | }, 1064 | { 1065 | "filename": "23.chunk.*****.esm.js", 1066 | "previous": 0, 1067 | "size": 7601, 1068 | "diff": 7601 1069 | }, 1070 | { 1071 | "filename": "24.chunk.*****.esm.js", 1072 | "previous": 0, 1073 | "size": 7254, 1074 | "diff": 7254 1075 | }, 1076 | { 1077 | "filename": "25.chunk.*****.esm.js", 1078 | "previous": 0, 1079 | "size": 12084, 1080 | "diff": 12084 1081 | }, 1082 | { 1083 | "filename": "26.chunk.*****.esm.js", 1084 | "previous": 0, 1085 | "size": 4922, 1086 | "diff": 4922 1087 | }, 1088 | { 1089 | "filename": "27.chunk.*****.esm.js", 1090 | "previous": 0, 1091 | "size": 7682, 1092 | "diff": 7682 1093 | }, 1094 | { 1095 | "filename": "28.chunk.*****.esm.js", 1096 | "previous": 0, 1097 | "size": 5460, 1098 | "diff": 5460 1099 | }, 1100 | { 1101 | "filename": "29.chunk.*****.esm.js", 1102 | "previous": 0, 1103 | "size": 6289, 1104 | "diff": 6289 1105 | }, 1106 | { 1107 | "filename": "30.chunk.*****.esm.js", 1108 | "previous": 0, 1109 | "size": 5848, 1110 | "diff": 5848 1111 | }, 1112 | { 1113 | "filename": "31.chunk.*****.esm.js", 1114 | "previous": 0, 1115 | "size": 6591, 1116 | "diff": 6591 1117 | }, 1118 | { 1119 | "filename": "32.chunk.*****.esm.js", 1120 | "previous": 0, 1121 | "size": 6313, 1122 | "diff": 6313 1123 | }, 1124 | { 1125 | "filename": "33.chunk.*****.esm.js", 1126 | "previous": 0, 1127 | "size": 5984, 1128 | "diff": 5984 1129 | }, 1130 | { 1131 | "filename": "34.chunk.*****.esm.js", 1132 | "previous": 0, 1133 | "size": 7716, 1134 | "diff": 7716 1135 | }, 1136 | { 1137 | "filename": "35.chunk.*****.esm.js", 1138 | "previous": 0, 1139 | "size": 4111, 1140 | "diff": 4111 1141 | }, 1142 | { 1143 | "filename": "36.chunk.*****.esm.js", 1144 | "previous": 0, 1145 | "size": 5481, 1146 | "diff": 5481 1147 | }, 1148 | { 1149 | "filename": "37.chunk.*****.esm.js", 1150 | "previous": 0, 1151 | "size": 3571, 1152 | "diff": 3571 1153 | }, 1154 | { 1155 | "filename": "38.chunk.*****.esm.js", 1156 | "previous": 0, 1157 | "size": 6711, 1158 | "diff": 6711 1159 | }, 1160 | { 1161 | "filename": "39.chunk.*****.esm.js", 1162 | "previous": 0, 1163 | "size": 4689, 1164 | "diff": 4689 1165 | }, 1166 | { 1167 | "filename": "40.chunk.*****.esm.js", 1168 | "previous": 0, 1169 | "size": 6776, 1170 | "diff": 6776 1171 | }, 1172 | { 1173 | "filename": "41.chunk.*****.esm.js", 1174 | "previous": 0, 1175 | "size": 3455, 1176 | "diff": 3455 1177 | }, 1178 | { 1179 | "filename": "42.chunk.*****.esm.js", 1180 | "previous": 0, 1181 | "size": 2715, 1182 | "diff": 2715 1183 | }, 1184 | { 1185 | "filename": "43.chunk.*****.esm.js", 1186 | "previous": 0, 1187 | "size": 5720, 1188 | "diff": 5720 1189 | }, 1190 | { 1191 | "filename": "44.chunk.*****.esm.js", 1192 | "previous": 0, 1193 | "size": 5424, 1194 | "diff": 5424 1195 | }, 1196 | { 1197 | "filename": "45.chunk.*****.esm.js", 1198 | "previous": 0, 1199 | "size": 4377, 1200 | "diff": 4377 1201 | }, 1202 | { 1203 | "filename": "46.chunk.*****.esm.js", 1204 | "previous": 0, 1205 | "size": 4402, 1206 | "diff": 4402 1207 | }, 1208 | { 1209 | "filename": "47.chunk.*****.esm.js", 1210 | "previous": 0, 1211 | "size": 5598, 1212 | "diff": 5598 1213 | }, 1214 | { 1215 | "filename": "48.chunk.*****.esm.js", 1216 | "previous": 0, 1217 | "size": 4330, 1218 | "diff": 4330 1219 | }, 1220 | { 1221 | "filename": "49.chunk.*****.esm.js", 1222 | "previous": 0, 1223 | "size": 9440, 1224 | "diff": 9440 1225 | }, 1226 | { 1227 | "filename": "50.chunk.*****.esm.js", 1228 | "previous": 0, 1229 | "size": 2776, 1230 | "diff": 2776 1231 | }, 1232 | { 1233 | "filename": "51.chunk.*****.esm.js", 1234 | "previous": 0, 1235 | "size": 2200, 1236 | "diff": 2200 1237 | }, 1238 | { 1239 | "filename": "52.chunk.*****.esm.js", 1240 | "previous": 0, 1241 | "size": 3313, 1242 | "diff": 3313 1243 | }, 1244 | { 1245 | "filename": "53.chunk.*****.esm.js", 1246 | "previous": 0, 1247 | "size": 1499, 1248 | "diff": 1499 1249 | }, 1250 | { 1251 | "filename": "54.chunk.*****.esm.js", 1252 | "previous": 0, 1253 | "size": 2933, 1254 | "diff": 2933 1255 | }, 1256 | { 1257 | "filename": "55.chunk.*****.esm.js", 1258 | "previous": 0, 1259 | "size": 1956, 1260 | "diff": 1956 1261 | }, 1262 | { 1263 | "filename": "56.chunk.*****.esm.js", 1264 | "previous": 0, 1265 | "size": 4677, 1266 | "diff": 4677 1267 | }, 1268 | { 1269 | "filename": "57.chunk.*****.esm.js", 1270 | "previous": 0, 1271 | "size": 5260, 1272 | "diff": 5260 1273 | }, 1274 | { 1275 | "filename": "58.chunk.*****.esm.js", 1276 | "previous": 0, 1277 | "size": 4089, 1278 | "diff": 4089 1279 | }, 1280 | { 1281 | "filename": "59.chunk.*****.esm.js", 1282 | "previous": 0, 1283 | "size": 2110, 1284 | "diff": 2110 1285 | }, 1286 | { 1287 | "filename": "60.chunk.*****.esm.js", 1288 | "previous": 0, 1289 | "size": 1630, 1290 | "diff": 1630 1291 | }, 1292 | { 1293 | "filename": "61.chunk.*****.esm.js", 1294 | "previous": 0, 1295 | "size": 1297, 1296 | "diff": 1297 1297 | }, 1298 | { 1299 | "filename": "62.chunk.*****.esm.js", 1300 | "previous": 0, 1301 | "size": 1837, 1302 | "diff": 1837 1303 | }, 1304 | { 1305 | "filename": "63.chunk.*****.esm.js", 1306 | "previous": 0, 1307 | "size": 1905, 1308 | "diff": 1905 1309 | }, 1310 | { 1311 | "filename": "64.chunk.*****.esm.js", 1312 | "previous": 0, 1313 | "size": 2620, 1314 | "diff": 2620 1315 | }, 1316 | { 1317 | "filename": "65.chunk.*****.esm.js", 1318 | "previous": 0, 1319 | "size": 1379, 1320 | "diff": 1379 1321 | }, 1322 | { 1323 | "filename": "66.chunk.*****.esm.js", 1324 | "previous": 0, 1325 | "size": 2078, 1326 | "diff": 2078 1327 | }, 1328 | { 1329 | "filename": "67.chunk.*****.esm.js", 1330 | "previous": 0, 1331 | "size": 1253, 1332 | "diff": 1253 1333 | }, 1334 | { 1335 | "filename": "68.chunk.*****.esm.js", 1336 | "previous": 0, 1337 | "size": 1109, 1338 | "diff": 1109 1339 | }, 1340 | { 1341 | "filename": "69.chunk.*****.esm.js", 1342 | "previous": 0, 1343 | "size": 1471, 1344 | "diff": 1471 1345 | }, 1346 | { 1347 | "filename": "70.chunk.*****.esm.js", 1348 | "previous": 0, 1349 | "size": 2845, 1350 | "diff": 2845 1351 | }, 1352 | { 1353 | "filename": "71.chunk.*****.esm.js", 1354 | "previous": 0, 1355 | "size": 3599, 1356 | "diff": 3599 1357 | }, 1358 | { 1359 | "filename": "72.chunk.*****.esm.js", 1360 | "previous": 0, 1361 | "size": 2900, 1362 | "diff": 2900 1363 | }, 1364 | { "filename": "sw-esm.js", "previous": 0, "size": 12065, "diff": 12065 }, 1365 | { "filename": "sw.js", "previous": 0, "size": 12047, "diff": 12047 }, 1366 | { 1367 | "filename": "0.chunk.6c8ea.js", 1368 | "previous": 0, 1369 | "size": 3772, 1370 | "diff": 3772 1371 | }, 1372 | { 1373 | "filename": "1.chunk.0be4d.js", 1374 | "previous": 0, 1375 | "size": 5004, 1376 | "diff": 5004 1377 | }, 1378 | { 1379 | "filename": "2.chunk.455ca.js", 1380 | "previous": 0, 1381 | "size": 10259, 1382 | "diff": 10259 1383 | }, 1384 | { 1385 | "filename": "3.chunk.854b1.js", 1386 | "previous": 0, 1387 | "size": 5152, 1388 | "diff": 5152 1389 | }, 1390 | { 1391 | "filename": "4.chunk.a9f06.js", 1392 | "previous": 0, 1393 | "size": 3035, 1394 | "diff": 3035 1395 | }, 1396 | { 1397 | "filename": "5.chunk.ff101.js", 1398 | "previous": 0, 1399 | "size": 12332, 1400 | "diff": 12332 1401 | }, 1402 | { 1403 | "filename": "bundle.3f5bc.js", 1404 | "previous": 0, 1405 | "size": 24204, 1406 | "diff": 24204 1407 | }, 1408 | { 1409 | "filename": "polyfills.abd84.js", 1410 | "previous": 0, 1411 | "size": 2415, 1412 | "diff": 2415 1413 | }, 1414 | { 1415 | "filename": "polyfills-core-js.chunk.dbc1e.js", 1416 | "previous": 0, 1417 | "size": 31203, 1418 | "diff": 31203 1419 | }, 1420 | { 1421 | "filename": "polyfills-dom.chunk.01eee.js", 1422 | "previous": 0, 1423 | "size": 5636, 1424 | "diff": 5636 1425 | }, 1426 | { 1427 | "filename": "route-home.chunk.0d73d.js", 1428 | "previous": 0, 1429 | "size": 441, 1430 | "diff": 441 1431 | }, 1432 | { 1433 | "filename": "route-profile.chunk.e2fc3.js", 1434 | "previous": 0, 1435 | "size": 1876, 1436 | "diff": 1876 1437 | }, 1438 | { 1439 | "filename": "12.chunk.521bd.js", 1440 | "previous": 0, 1441 | "size": 14442, 1442 | "diff": 14442 1443 | }, 1444 | { 1445 | "filename": "13.chunk.b2760.js", 1446 | "previous": 0, 1447 | "size": 11675, 1448 | "diff": 11675 1449 | }, 1450 | { 1451 | "filename": "14.chunk.e0c88.js", 1452 | "previous": 0, 1453 | "size": 5493, 1454 | "diff": 5493 1455 | }, 1456 | { 1457 | "filename": "15.chunk.077e7.js", 1458 | "previous": 0, 1459 | "size": 12564, 1460 | "diff": 12564 1461 | }, 1462 | { 1463 | "filename": "16.chunk.19be6.js", 1464 | "previous": 0, 1465 | "size": 20060, 1466 | "diff": 20060 1467 | }, 1468 | { 1469 | "filename": "17.chunk.86527.js", 1470 | "previous": 0, 1471 | "size": 5155, 1472 | "diff": 5155 1473 | }, 1474 | { 1475 | "filename": "18.chunk.57fac.js", 1476 | "previous": 0, 1477 | "size": 4169, 1478 | "diff": 4169 1479 | }, 1480 | { 1481 | "filename": "19.chunk.4ce7f.js", 1482 | "previous": 0, 1483 | "size": 4435, 1484 | "diff": 4435 1485 | }, 1486 | { 1487 | "filename": "20.chunk.3fb13.js", 1488 | "previous": 0, 1489 | "size": 4682, 1490 | "diff": 4682 1491 | }, 1492 | { 1493 | "filename": "21.chunk.f11db.js", 1494 | "previous": 0, 1495 | "size": 4082, 1496 | "diff": 4082 1497 | }, 1498 | { 1499 | "filename": "22.chunk.c8ad9.js", 1500 | "previous": 0, 1501 | "size": 8092, 1502 | "diff": 8092 1503 | }, 1504 | { 1505 | "filename": "23.chunk.4dc48.js", 1506 | "previous": 0, 1507 | "size": 9234, 1508 | "diff": 9234 1509 | }, 1510 | { 1511 | "filename": "24.chunk.b4c6c.js", 1512 | "previous": 0, 1513 | "size": 8281, 1514 | "diff": 8281 1515 | }, 1516 | { 1517 | "filename": "25.chunk.77227.js", 1518 | "previous": 0, 1519 | "size": 5818, 1520 | "diff": 5818 1521 | }, 1522 | { 1523 | "filename": "26.chunk.cec44.js", 1524 | "previous": 0, 1525 | "size": 8536, 1526 | "diff": 8536 1527 | }, 1528 | { 1529 | "filename": "27.chunk.c3219.js", 1530 | "previous": 0, 1531 | "size": 3964, 1532 | "diff": 3964 1533 | }, 1534 | { 1535 | "filename": "28.chunk.a6fd4.js", 1536 | "previous": 0, 1537 | "size": 3264, 1538 | "diff": 3264 1539 | }, 1540 | { 1541 | "filename": "29.chunk.fe79e.js", 1542 | "previous": 0, 1543 | "size": 6751, 1544 | "diff": 6751 1545 | }, 1546 | { 1547 | "filename": "30.chunk.8c41a.js", 1548 | "previous": 0, 1549 | "size": 7308, 1550 | "diff": 7308 1551 | }, 1552 | { 1553 | "filename": "31.chunk.53345.js", 1554 | "previous": 0, 1555 | "size": 6132, 1556 | "diff": 6132 1557 | }, 1558 | { 1559 | "filename": "32.chunk.c8384.js", 1560 | "previous": 0, 1561 | "size": 9445, 1562 | "diff": 9445 1563 | }, 1564 | { 1565 | "filename": "33.chunk.ad764.js", 1566 | "previous": 0, 1567 | "size": 5238, 1568 | "diff": 5238 1569 | }, 1570 | { 1571 | "filename": "34.chunk.723d6.js", 1572 | "previous": 0, 1573 | "size": 4923, 1574 | "diff": 4923 1575 | }, 1576 | { 1577 | "filename": "35.chunk.f4d01.js", 1578 | "previous": 0, 1579 | "size": 7455, 1580 | "diff": 7455 1581 | }, 1582 | { 1583 | "filename": "36.chunk.49c16.js", 1584 | "previous": 0, 1585 | "size": 5494, 1586 | "diff": 5494 1587 | }, 1588 | { 1589 | "filename": "37.chunk.6eeeb.js", 1590 | "previous": 0, 1591 | "size": 10420, 1592 | "diff": 10420 1593 | }, 1594 | { 1595 | "filename": "38.chunk.86b58.js", 1596 | "previous": 0, 1597 | "size": 2934, 1598 | "diff": 2934 1599 | }, 1600 | { 1601 | "filename": "39.chunk.af2c4.js", 1602 | "previous": 0, 1603 | "size": 5609, 1604 | "diff": 5609 1605 | }, 1606 | { 1607 | "filename": "40.chunk.506ea.js", 1608 | "previous": 0, 1609 | "size": 2867, 1610 | "diff": 2867 1611 | }, 1612 | { 1613 | "filename": "41.chunk.fac9a.js", 1614 | "previous": 0, 1615 | "size": 3721, 1616 | "diff": 3721 1617 | }, 1618 | { 1619 | "filename": "42.chunk.af1b1.js", 1620 | "previous": 0, 1621 | "size": 3861, 1622 | "diff": 3861 1623 | }, 1624 | { 1625 | "filename": "43.chunk.e1863.js", 1626 | "previous": 0, 1627 | "size": 3364, 1628 | "diff": 3364 1629 | }, 1630 | { 1631 | "filename": "44.chunk.85b38.js", 1632 | "previous": 0, 1633 | "size": 3827, 1634 | "diff": 3827 1635 | }, 1636 | { 1637 | "filename": "45.chunk.0c5fa.js", 1638 | "previous": 0, 1639 | "size": 4611, 1640 | "diff": 4611 1641 | }, 1642 | { 1643 | "filename": "46.chunk.15621.js", 1644 | "previous": 0, 1645 | "size": 4893, 1646 | "diff": 4893 1647 | }, 1648 | { 1649 | "filename": "47.chunk.b141b.js", 1650 | "previous": 0, 1651 | "size": 5063, 1652 | "diff": 5063 1653 | }, 1654 | { 1655 | "filename": "48.chunk.3ad11.js", 1656 | "previous": 0, 1657 | "size": 3749, 1658 | "diff": 3749 1659 | }, 1660 | { 1661 | "filename": "49.chunk.03d20.js", 1662 | "previous": 0, 1663 | "size": 4072, 1664 | "diff": 4072 1665 | }, 1666 | { 1667 | "filename": "50.chunk.15b85.js", 1668 | "previous": 0, 1669 | "size": 2039, 1670 | "diff": 2039 1671 | }, 1672 | { 1673 | "filename": "51.chunk.f5285.js", 1674 | "previous": 0, 1675 | "size": 2527, 1676 | "diff": 2527 1677 | }, 1678 | { 1679 | "filename": "52.chunk.48663.js", 1680 | "previous": 0, 1681 | "size": 6120, 1682 | "diff": 6120 1683 | }, 1684 | { 1685 | "filename": "53.chunk.be440.js", 1686 | "previous": 0, 1687 | "size": 5802, 1688 | "diff": 5802 1689 | }, 1690 | { 1691 | "filename": "54.chunk.f626b.js", 1692 | "previous": 0, 1693 | "size": 6922, 1694 | "diff": 6922 1695 | }, 1696 | { 1697 | "filename": "55.chunk.61af5.js", 1698 | "previous": 0, 1699 | "size": 4622, 1700 | "diff": 4622 1701 | }, 1702 | { 1703 | "filename": "56.chunk.71cfd.js", 1704 | "previous": 0, 1705 | "size": 2971, 1706 | "diff": 2971 1707 | }, 1708 | { 1709 | "filename": "57.chunk.0ee2f.js", 1710 | "previous": 0, 1711 | "size": 3528, 1712 | "diff": 3528 1713 | }, 1714 | { 1715 | "filename": "58.chunk.59e13.js", 1716 | "previous": 0, 1717 | "size": 2781, 1718 | "diff": 2781 1719 | }, 1720 | { 1721 | "filename": "59.chunk.12798.js", 1722 | "previous": 0, 1723 | "size": 1880, 1724 | "diff": 1880 1725 | }, 1726 | { 1727 | "filename": "60.chunk.e3dda.js", 1728 | "previous": 0, 1729 | "size": 3034, 1730 | "diff": 3034 1731 | }, 1732 | { 1733 | "filename": "61.chunk.dbc6b.js", 1734 | "previous": 0, 1735 | "size": 2266, 1736 | "diff": 2266 1737 | }, 1738 | { 1739 | "filename": "62.chunk.4272f.js", 1740 | "previous": 0, 1741 | "size": 2794, 1742 | "diff": 2794 1743 | }, 1744 | { 1745 | "filename": "63.chunk.38351.js", 1746 | "previous": 0, 1747 | "size": 2325, 1748 | "diff": 2325 1749 | }, 1750 | { 1751 | "filename": "64.chunk.7072b.js", 1752 | "previous": 0, 1753 | "size": 2729, 1754 | "diff": 2729 1755 | }, 1756 | { 1757 | "filename": "65.chunk.e98ae.js", 1758 | "previous": 0, 1759 | "size": 2509, 1760 | "diff": 2509 1761 | }, 1762 | { 1763 | "filename": "66.chunk.323db.js", 1764 | "previous": 0, 1765 | "size": 1638, 1766 | "diff": 1638 1767 | }, 1768 | { 1769 | "filename": "67.chunk.5fb4f.js", 1770 | "previous": 0, 1771 | "size": 2823, 1772 | "diff": 2823 1773 | }, 1774 | { 1775 | "filename": "68.chunk.ffd54.js", 1776 | "previous": 0, 1777 | "size": 1481, 1778 | "diff": 1481 1779 | }, 1780 | { 1781 | "filename": "69.chunk.8fb37.js", 1782 | "previous": 0, 1783 | "size": 1663, 1784 | "diff": 1663 1785 | }, 1786 | { 1787 | "filename": "70.chunk.e624d.js", 1788 | "previous": 0, 1789 | "size": 3497, 1790 | "diff": 3497 1791 | }, 1792 | { 1793 | "filename": "71.chunk.6ca47.js", 1794 | "previous": 0, 1795 | "size": 4249, 1796 | "diff": 4249 1797 | }, 1798 | { 1799 | "filename": "72.chunk.dff99.js", 1800 | "previous": 0, 1801 | "size": 3207, 1802 | "diff": 3207 1803 | }, 1804 | { "filename": "index.html", "previous": 0, "size": 1367, "diff": 1367 }, 1805 | { "filename": "200.html", "previous": 0, "size": 1367, "diff": 1367 } 1806 | ] 1807 | } 1808 | ] 1809 | --------------------------------------------------------------------------------