Switch parcel
This commit is contained in:
parent
7656ca80c5
commit
1300675225
|
@ -1,4 +1,7 @@
|
||||||
.vscode
|
.vscode
|
||||||
app/node_modules
|
app/node_modules
|
||||||
api/tmp
|
api/tmp
|
||||||
data
|
data
|
||||||
|
app/.cache
|
||||||
|
app/.parcel-cache
|
||||||
|
app/www
|
|
@ -1,15 +0,0 @@
|
||||||
# http://editorconfig.org
|
|
||||||
|
|
||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
charset = utf-8
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
end_of_line = lf
|
|
||||||
insert_final_newline = true
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
|
|
||||||
[*.md]
|
|
||||||
insert_final_newline = false
|
|
||||||
trim_trailing_whitespace = false
|
|
|
@ -1,26 +0,0 @@
|
||||||
dist/
|
|
||||||
!www/favicon.ico
|
|
||||||
www/
|
|
||||||
|
|
||||||
*~
|
|
||||||
*.sw[mnpcod]
|
|
||||||
*.log
|
|
||||||
*.lock
|
|
||||||
*.tmp
|
|
||||||
*.tmp.*
|
|
||||||
log.txt
|
|
||||||
*.sublime-project
|
|
||||||
*.sublime-workspace
|
|
||||||
|
|
||||||
.stencil/
|
|
||||||
.idea/
|
|
||||||
.vscode/
|
|
||||||
.sass-cache/
|
|
||||||
.versions/
|
|
||||||
node_modules/
|
|
||||||
$RECYCLE.BIN/
|
|
||||||
|
|
||||||
.DS_Store
|
|
||||||
Thumbs.db
|
|
||||||
UserInterfaceState.xcuserstate
|
|
||||||
.env
|
|
|
@ -1,13 +0,0 @@
|
||||||
{
|
|
||||||
"arrowParens": "avoid",
|
|
||||||
"bracketSpacing": true,
|
|
||||||
"jsxBracketSameLine": false,
|
|
||||||
"jsxSingleQuote": false,
|
|
||||||
"quoteProps": "consistent",
|
|
||||||
"printWidth": 180,
|
|
||||||
"semi": true,
|
|
||||||
"singleQuote": true,
|
|
||||||
"tabWidth": 2,
|
|
||||||
"trailingComma": "all",
|
|
||||||
"useTabs": false
|
|
||||||
}
|
|
21
app/LICENSE
21
app/LICENSE
|
@ -1,21 +0,0 @@
|
||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2019
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,22 +1,14 @@
|
||||||
{
|
{
|
||||||
"name": "magmise",
|
"name": "app",
|
||||||
"private": true,
|
"version": "1.0.0",
|
||||||
"version": "0.0.1",
|
"source": "src/index.html",
|
||||||
"description": "Stencil App Starter",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "stencil build",
|
"start": "parcel",
|
||||||
"start": "stencil build --dev --watch --serve",
|
"build": "parcel build src/index.html --dist-dir www",
|
||||||
"test": "stencil test --spec --e2e",
|
"watch": "parcel watch src/index.html --dist-dir www"
|
||||||
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
||||||
"generate": "stencil generate"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@stencil-community/router": "^1.0.2",
|
"parcel": "latest"
|
||||||
"@stencil/core": "2.13.0",
|
}
|
||||||
"@types/jest": "^27.0.3",
|
|
||||||
"jest": "^27.4.5",
|
|
||||||
"jest-cli": "^27.4.5",
|
|
||||||
"puppeteer": "^10.0.0"
|
|
||||||
},
|
|
||||||
"license": "MIT"
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,41 +0,0 @@
|
||||||
# Stencil App Starter
|
|
||||||
|
|
||||||
Stencil is a compiler for building fast web apps using Web Components.
|
|
||||||
|
|
||||||
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
|
|
||||||
|
|
||||||
Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.
|
|
||||||
|
|
||||||
Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
To start a new project using Stencil, clone this repo to a new directory:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm init stencil app
|
|
||||||
```
|
|
||||||
|
|
||||||
and run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm start
|
|
||||||
```
|
|
||||||
|
|
||||||
To build the app for production, run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
To run the unit tests once, run:
|
|
||||||
|
|
||||||
```
|
|
||||||
npm test
|
|
||||||
```
|
|
||||||
|
|
||||||
To run the unit tests and watch for file changes during development, run:
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run test.watch
|
|
||||||
```
|
|
Binary file not shown.
Before Width: | Height: | Size: 549 B |
Binary file not shown.
Before Width: | Height: | Size: 6.6 KiB |
|
@ -1,50 +0,0 @@
|
||||||
/* eslint-disable */
|
|
||||||
/* tslint:disable */
|
|
||||||
/**
|
|
||||||
* This is an autogenerated file created by the Stencil compiler.
|
|
||||||
* It contains typing information for all components that exist in this project.
|
|
||||||
*/
|
|
||||||
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
|
|
||||||
export namespace Components {
|
|
||||||
interface AppRoot {
|
|
||||||
}
|
|
||||||
interface WebConsole {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
declare global {
|
|
||||||
interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
|
|
||||||
}
|
|
||||||
var HTMLAppRootElement: {
|
|
||||||
prototype: HTMLAppRootElement;
|
|
||||||
new (): HTMLAppRootElement;
|
|
||||||
};
|
|
||||||
interface HTMLWebConsoleElement extends Components.WebConsole, HTMLStencilElement {
|
|
||||||
}
|
|
||||||
var HTMLWebConsoleElement: {
|
|
||||||
prototype: HTMLWebConsoleElement;
|
|
||||||
new (): HTMLWebConsoleElement;
|
|
||||||
};
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
"app-root": HTMLAppRootElement;
|
|
||||||
"web-console": HTMLWebConsoleElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
declare namespace LocalJSX {
|
|
||||||
interface AppRoot {
|
|
||||||
}
|
|
||||||
interface WebConsole {
|
|
||||||
}
|
|
||||||
interface IntrinsicElements {
|
|
||||||
"app-root": AppRoot;
|
|
||||||
"web-console": WebConsole;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export { LocalJSX as JSX };
|
|
||||||
declare module "@stencil/core" {
|
|
||||||
export namespace JSX {
|
|
||||||
interface IntrinsicElements {
|
|
||||||
"app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
|
|
||||||
"web-console": LocalJSX.WebConsole & JSXBase.HTMLAttributes<HTMLWebConsoleElement>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,15 +0,0 @@
|
||||||
header {
|
|
||||||
background: #5851ff;
|
|
||||||
color: white;
|
|
||||||
height: 56px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
|
@ -1,17 +0,0 @@
|
||||||
import { newE2EPage } from '@stencil/core/testing';
|
|
||||||
|
|
||||||
describe('app-root', () => {
|
|
||||||
it('renders', async () => {
|
|
||||||
const page = await newE2EPage({ url: '/' });
|
|
||||||
|
|
||||||
const element = await page.find('app-root');
|
|
||||||
expect(element).toHaveClass('hydrated');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders the title', async () => {
|
|
||||||
const page = await newE2EPage({ url: '/' });
|
|
||||||
|
|
||||||
const element = await page.find('app-root >>> h1');
|
|
||||||
expect(element.textContent).toEqual('Stencil App Starter');
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,26 +0,0 @@
|
||||||
import { Component, h } from '@stencil/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
tag: 'app-root',
|
|
||||||
styleUrl: 'app-root.css',
|
|
||||||
shadow: true,
|
|
||||||
})
|
|
||||||
export class AppRoot {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<header>
|
|
||||||
<h1>Stencil App Starter</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<stencil-router>
|
|
||||||
<stencil-route-switch scrollTopOffset={0}>
|
|
||||||
<stencil-route url="/" component="web-component" exact={true} />
|
|
||||||
</stencil-route-switch>
|
|
||||||
</stencil-router>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,11 +0,0 @@
|
||||||
import { newE2EPage } from '@stencil/core/testing';
|
|
||||||
|
|
||||||
describe('web-console', () => {
|
|
||||||
it('renders', async () => {
|
|
||||||
const page = await newE2EPage();
|
|
||||||
await page.setContent('<web-console></web-console>');
|
|
||||||
|
|
||||||
const element = await page.find('web-console');
|
|
||||||
expect(element).toHaveClass('hydrated');
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,18 +0,0 @@
|
||||||
import { newSpecPage } from '@stencil/core/testing';
|
|
||||||
import { WebConsole } from '../web-console';
|
|
||||||
|
|
||||||
describe('web-console', () => {
|
|
||||||
it('renders', async () => {
|
|
||||||
const page = await newSpecPage({
|
|
||||||
components: [WebConsole],
|
|
||||||
html: `<web-console></web-console>`,
|
|
||||||
});
|
|
||||||
expect(page.root).toEqualHtml(`
|
|
||||||
<web-console>
|
|
||||||
<mock:shadow-root>
|
|
||||||
<slot></slot>
|
|
||||||
</mock:shadow-root>
|
|
||||||
</web-console>
|
|
||||||
`);
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,3 +0,0 @@
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
|
@ -1,18 +0,0 @@
|
||||||
import { Component, Host, h } from '@stencil/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
tag: 'web-console',
|
|
||||||
styleUrl: 'web-console.css',
|
|
||||||
shadow: true,
|
|
||||||
})
|
|
||||||
export class WebConsole {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Host>
|
|
||||||
<slot></slot>
|
|
||||||
</Host>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -1,15 +0,0 @@
|
||||||
/*
|
|
||||||
Global App CSS
|
|
||||||
----------------------
|
|
||||||
Use this file for styles that should be applied to all components.
|
|
||||||
For example, "font-family" within the "body" selector is a CSS property
|
|
||||||
most apps will want applied to all components.
|
|
||||||
|
|
||||||
Any global CSS variables should also be applied here.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
||||||
}
|
|
|
@ -1,7 +0,0 @@
|
||||||
export default async () => {
|
|
||||||
/**
|
|
||||||
* The code to be executed should be placed within a default function that is
|
|
||||||
* exported by the global script. Ensure all of the code in the global script
|
|
||||||
* is wrapped in the function() that is exported.
|
|
||||||
*/
|
|
||||||
};
|
|
|
@ -1,25 +1,12 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html dir="ltr" lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<title>Stencil Starter App</title>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
|
<title>Document</title>
|
||||||
<meta name="theme-color" content="#16161d">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
||||||
<meta http-equiv="x-ua-compatible" content="IE=Edge">
|
|
||||||
|
|
||||||
<script type="module" src="/build/app.esm.js"></script>
|
|
||||||
<script nomodule src="/build/app.js"></script>
|
|
||||||
<link href="/build/app.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<link rel="apple-touch-icon" href="/assets/icon/icon.png">
|
|
||||||
<link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
|
|
||||||
<link rel="manifest" href="/manifest.json">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script type="module" src="js/main.js"></script>
|
||||||
<app-root></app-root>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,2 +0,0 @@
|
||||||
export { Components, JSX } from './components';
|
|
||||||
import '@stencil-community/router';
|
|
|
@ -0,0 +1 @@
|
||||||
|
console.log("Hello");
|
|
@ -1,13 +0,0 @@
|
||||||
{
|
|
||||||
"name": "Stencil Starter",
|
|
||||||
"short_name": "Stencil",
|
|
||||||
"start_url": "/",
|
|
||||||
"display": "standalone",
|
|
||||||
"icons": [{
|
|
||||||
"src": "assets/icon/icon.png",
|
|
||||||
"sizes": "512x512",
|
|
||||||
"type": "image/png"
|
|
||||||
}],
|
|
||||||
"background_color": "#16161d",
|
|
||||||
"theme_color": "#16161d"
|
|
||||||
}
|
|
|
@ -1,17 +0,0 @@
|
||||||
import { Config } from '@stencil/core';
|
|
||||||
|
|
||||||
// https://stenciljs.com/docs/config
|
|
||||||
|
|
||||||
export const config: Config = {
|
|
||||||
globalStyle: 'src/global/app.css',
|
|
||||||
globalScript: 'src/global/app.ts',
|
|
||||||
taskQueue: 'async',
|
|
||||||
outputTargets: [
|
|
||||||
{
|
|
||||||
type: 'www',
|
|
||||||
// comment the following line to disable service workers in production
|
|
||||||
serviceWorker: null,
|
|
||||||
baseUrl: 'https://myapp.local/',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
|
@ -1,25 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"allowUnreachableCode": false,
|
|
||||||
"declaration": false,
|
|
||||||
"experimentalDecorators": true,
|
|
||||||
"lib": [
|
|
||||||
"dom",
|
|
||||||
"es2015"
|
|
||||||
],
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"module": "esnext",
|
|
||||||
"target": "es2017",
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"jsx": "react",
|
|
||||||
"jsxFactory": "h"
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -35,13 +35,16 @@ services:
|
||||||
working_dir: /api
|
working_dir: /api
|
||||||
ports:
|
ports:
|
||||||
- 8080:8080
|
- 8080:8080
|
||||||
|
|
||||||
|
|
||||||
stencil:
|
parcel:
|
||||||
image: node
|
image: node
|
||||||
volumes:
|
volumes:
|
||||||
- ./app:/app
|
- ./app:/app
|
||||||
|
ports:
|
||||||
|
- 1234:1234
|
||||||
working_dir: /app
|
working_dir: /app
|
||||||
command: sh -c "npm install && npm start"
|
command: sh -c "npm install && npm run watch"
|
||||||
|
|
||||||
volumes:
|
volumes:
|
||||||
test:
|
test:
|
||||||
|
|
Loading…
Reference in New Issue