Skip to content

Commit a2d30fb

Browse files
wibus-weewibus-wee
committed
feat: new template - vite ts starter
1 parent adc50d9 commit a2d30fb

File tree

13 files changed

+311
-0
lines changed

13 files changed

+311
-0
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
**/dist
2+
**/build
3+
**/out
4+
**/node_modules
5+
**/bower_components
6+
**/jspm_packages
7+
**/flow-typed
8+
**/coverage
9+
**/target
10+
**/.idea
11+
**/vendor
12+
**/tmp
13+
**/*.log
14+
**/*.log.*
15+
**/*.swp
16+
**/*.swo
17+
**/*.swn
18+
~$*
19+
*.~
20+
*.bak
21+
*.tmp
22+
**/.DS_Store
23+
**/Thumbs.db
24+
**/Desktop.ini

‎templates/starter-vite-ts/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Jwc.js
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎templates/starter-vite-ts/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vite + Jwc.js App</title>
8+
<link rel="stylesheet" href="./src/index.css">
9+
<script type="module" src="./src/index.ts"></script>
10+
</head>
11+
<body>
12+
<app-element count="2022" ></app-element>
13+
</body>
14+
</html>

‎templates/starter-vite-ts/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "@jwcjs/starter-vite-ts",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "ISC",
14+
"devDependencies": {
15+
"vite": "^4.0.1",
16+
"jwcjs": "*"
17+
}
18+
}

‎templates/starter-vite-ts/public/jwc-dark.svg

Lines changed: 8 additions & 0 deletions
Loading

‎templates/starter-vite-ts/public/jwc.svg

Lines changed: 8 additions & 0 deletions
Loading

‎templates/starter-vite-ts/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎templates/starter-vite-ts/src/App.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
:host {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
transition: filter 0.25s;
13+
}
14+
.logo:hover {
15+
filter: drop-shadow(0 0 2em #646cffaa);
16+
}
17+
.logo.jwc:hover {
18+
filter: drop-shadow(0 0 2em rgb(0, 0, 0));
19+
}
20+
21+
.card {
22+
padding: 2em;
23+
}
24+
25+
.read-the-docs {
26+
color: #888;
27+
}
28+
29+
@media (prefers-color-scheme: dark) {
30+
.logo.jwc:hover {
31+
filter: drop-shadow(0 0 2em rgb(255, 255, 255));
32+
}
33+
}
34+
35+
button {
36+
border-radius: 8px;
37+
border: 1px solid transparent;
38+
padding: 0.6em 1.2em;
39+
font-size: 1em;
40+
font-weight: 500;
41+
font-family: inherit;
42+
background-color: #1a1a1a;
43+
cursor: pointer;
44+
transition: border-color 0.25s;
45+
}
46+
button:hover {
47+
border-color: #646cff;
48+
}
49+
button:focus,
50+
button:focus-visible {
51+
outline: 4px auto -webkit-focus-ring-color;
52+
}
53+
54+
@media (prefers-color-scheme: light) {
55+
button {
56+
background-color: #f9f9f9;
57+
}
58+
}

‎templates/starter-vite-ts/src/App.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { JwcComponent, Component, Prop, h, Fragment } from "jwcjs";
2+
import styles from "./App.css?inline";
3+
4+
@Component({
5+
name: "app-element",
6+
css: styles,
7+
})
8+
export class App extends JwcComponent {
9+
constructor() {
10+
super();
11+
}
12+
13+
@Prop({ default: 0, attr: "count" })
14+
public count = 0;
15+
16+
public onClick = () => {
17+
this.count++;
18+
};
19+
20+
// get media
21+
public getSystemColorScheme() {
22+
return window.matchMedia("(prefers-color-scheme: dark)").matches
23+
? "dark"
24+
: "light";
25+
}
26+
27+
public override connectedCallback() {
28+
super.connectedCallback();
29+
window
30+
.matchMedia("(prefers-color-scheme: dark)")
31+
.addEventListener("change", () => {
32+
this.updateDiff();
33+
console.log("change");
34+
});
35+
}
36+
37+
public override disconnectedCallback() {
38+
super.disconnectedCallback();
39+
window
40+
.matchMedia("(prefers-color-scheme: dark)")
41+
.removeEventListener("change", () => {
42+
this.updateDiff();
43+
});
44+
}
45+
46+
public override render() {
47+
return (
48+
<>
49+
<div>
50+
<a href="https://vitejs.dev" target="_blank">
51+
<img src="/vite.svg" class="logo" alt="Vite logo" />
52+
</a>
53+
<a href="https://github.com/jwcjs/core" target="_blank">
54+
<img
55+
src={
56+
this.getSystemColorScheme() === "dark"
57+
? "/jwc-dark.svg"
58+
: "/jwc.svg"
59+
}
60+
class="logo jwc"
61+
alt="Jwc logo"
62+
/>
63+
</a>
64+
</div>
65+
<div class={"card"}>
66+
<button onClick={this.onClick}>
67+
count is {String(this.count)}
68+
</button>
69+
</div>
70+
<p class="read-the-docs">
71+
Click on the Vite and Jwc logos to learn more
72+
</p>
73+
</>
74+
);
75+
}
76+
}

‎templates/starter-vite-ts/src/index.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
a:hover {
24+
color: #535bf2;
25+
}
26+
27+
body {
28+
margin: 0;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;
33+
}
34+
35+
h1 {
36+
font-size: 3.2em;
37+
line-height: 1.1;
38+
}
39+
40+
@media (prefers-color-scheme: light) {
41+
:root {
42+
color: #213547;
43+
background-color: #ffffff;
44+
}
45+
a:hover {
46+
color: #747bff;
47+
}
48+
button {
49+
background-color: #f9f9f9;
50+
}
51+
}
52+
53+
#root {
54+
max-width: 1280px;
55+
margin: 0 auto;
56+
padding: 2rem;
57+
text-align: center;
58+
}

0 commit comments

Comments
 (0)