Skip to content

Commit f781c15

Browse files
author
Michael Vurchio
committed
Add webpack example
1 parent d238822 commit f781c15

File tree

8 files changed

+5730
-0
lines changed

8 files changed

+5730
-0
lines changed

‎example/webpack/App.svelte‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script>
2+
import Time from './Time.svelte'
3+
</script>
4+
5+
<style>
6+
.overlay {
7+
position: fixed;
8+
top: 0;
9+
right: 0;
10+
bottom: 0;
11+
left: 0;
12+
z-index: 5;
13+
background-color: rgba(0, 0, 0, 0.5);
14+
}
15+
.modal {
16+
position: fixed;
17+
top: 50%;
18+
left: 50%;
19+
z-index: 10;
20+
width: 400px;
21+
height: 80%;
22+
font-family: 'Helvetica Neue', Helvetica, Arial;
23+
background-color: #fff;
24+
transform: translateX(-50%) translateY(-50%);
25+
-webkit-font-smoothing: antialiased;
26+
}
27+
28+
section {
29+
flex: 0 1 auto;
30+
flex-direction: column;
31+
display: flex;
32+
height: 100%;
33+
}
34+
35+
header {
36+
padding: 1rem;
37+
font-size: 1.2rem;
38+
font-weight: bold;
39+
border-bottom: 1px solid #d9d9d9;
40+
}
41+
42+
.body {
43+
padding: 1rem;
44+
flex: 1 0 0;
45+
min-height: 0;
46+
max-height: 100%;
47+
overflow: scroll;
48+
-webkit-overflow-scrolling: touch;
49+
}
50+
51+
footer {
52+
padding: 1rem;
53+
text-align: right;
54+
border-top: 1px solid #d9d9d9;
55+
}
56+
button {
57+
padding: .5em 1em;
58+
min-width: 100px;
59+
font-size: .8rem;
60+
font-weight: 600;
61+
background: #fff;
62+
border: 1px solid #ccc;
63+
border-radius: 5px;
64+
}
65+
.cancel {
66+
background-color: #f2f2f2;
67+
}
68+
</style>
69+
70+
<div class="$style.overlay" />
71+
<div class="$style.modal">
72+
<section>
73+
<header>My Modal title</header>
74+
<div class="$style.body">
75+
<Time />
76+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt.</p>
77+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt. Lorem ipsum dolor sit amet. </p>
78+
</div>
79+
<footer>
80+
<button>Ok</button>
81+
<button class="$style.cancel">Cancel</button>
82+
</footer>
83+
</section>
84+
</div>

‎example/webpack/Time.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script>
2+
import { onDestroy } from 'svelte'
3+
4+
let date = new Date()
5+
$: time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
6+
7+
const interval = setInterval(() => date = new Date(), 1000)
8+
9+
onDestroy(() => {
10+
clearInterval(interval)
11+
})
12+
</script>
13+
14+
<style>
15+
div {
16+
text-align: right;
17+
font-size: 1.2rem;
18+
font-family: monospace;
19+
}
20+
</style>
21+
22+
<div class="$style.datetime">{time}</div>

‎example/webpack/dist/bundle.js‎

Lines changed: 149 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/webpack/dist/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Svelte CSS modules loader</title>
5+
</head>
6+
<body>
7+
<div id="app"></div>
8+
<script src="bundle.js"></script>
9+
</body>
10+
</html>

‎example/webpack/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import App from './App.svelte'
2+
3+
new App({
4+
target: document.getElementById('app')
5+
})

0 commit comments

Comments
 (0)