Switch parcel
This commit is contained in:
parent
7656ca80c5
commit
1300675225
|
|
@ -1,4 +1,7 @@
|
|||
.vscode
|
||||
app/node_modules
|
||||
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",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"description": "Stencil App Starter",
|
||||
"name": "app",
|
||||
"version": "1.0.0",
|
||||
"source": "src/index.html",
|
||||
"scripts": {
|
||||
"build": "stencil build",
|
||||
"start": "stencil build --dev --watch --serve",
|
||||
"test": "stencil test --spec --e2e",
|
||||
"test.watch": "stencil test --spec --e2e --watchAll",
|
||||
"generate": "stencil generate"
|
||||
"start": "parcel",
|
||||
"build": "parcel build src/index.html --dist-dir www",
|
||||
"watch": "parcel watch src/index.html --dist-dir www"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@stencil-community/router": "^1.0.2",
|
||||
"@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"
|
||||
"parcel": "latest"
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<html dir="ltr" lang="en">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Stencil Starter App</title>
|
||||
<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, minimum-scale=1.0, maximum-scale=5.0">
|
||||
<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">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<app-root></app-root>
|
||||
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</body>
|
||||
</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
|
||||
ports:
|
||||
- 8080:8080
|
||||
|
||||
|
||||
stencil:
|
||||
parcel:
|
||||
image: node
|
||||
volumes:
|
||||
- ./app:/app
|
||||
ports:
|
||||
- 1234:1234
|
||||
working_dir: /app
|
||||
command: sh -c "npm install && npm start"
|
||||
command: sh -c "npm install && npm run watch"
|
||||
|
||||
volumes:
|
||||
test:
|
||||
|
|
|
|||
Loading…
Reference in New Issue