Skip to content

Commit 2ee5c2f

Browse files
wibus-weewibus-wee
authored
chore: create a demo workspace (#15)
1 parent 85c6bf5 commit 2ee5c2f

15 files changed

+297
-1
lines changed

‎demo/LICENSE

+21
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.

‎demo/index.html

+14
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>

‎demo/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "demo",
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+
}

‎demo/public/index.html

+14
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="./index.css">
9+
<script type="module" src="./index.es.js"></script>
10+
</head>
11+
<body>
12+
<app-element></app-element>
13+
</body>
14+
</html>

‎demo/public/jwc-dark.svg

+8
Loading

‎demo/public/jwc.svg

+8
Loading

‎demo/public/vite.svg

+1
Loading

‎demo/src/App.css

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

‎demo/src/App.tsx

+76
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+
}

‎demo/src/index.css

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

‎demo/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./App";

‎demo/src/vite-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎demo/vite.config.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { defineConfig } from "vite";
2+
export default defineConfig({});

‎pnpm-lock.yaml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pnpm-workspace.yaml

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
packages:
2-
- packages/*
2+
- packages/*
3+
- demo

0 commit comments

Comments
 (0)