Skip to content

Commit 5e47b42

Browse files
iain-at-squiziain-at-squiz
committed
Convert Preact code to Solid
TODO: fix tests TODO: figure out if re-rendering with new props is possible
1 parent 49dce2f commit 5e47b42

38 files changed

+12209
-26745
lines changed

‎.prettierrc

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
{
22
"singleQuote": true,
33
"trailingComma": "all",
4-
"semi": false,
4+
"semi": true,
55
"endOfLine": "auto"
6-
}
7-
8-
6+
}

‎example-react/declaration.d.ts

-1
This file was deleted.

‎example-react/package-lock.json

-4,292
This file was deleted.

‎example-react/package.json

-24
This file was deleted.

‎example-react/src/call-to-action.island.css

-57
This file was deleted.

‎example-react/src/call-to-action.react.island.tsx

-52
This file was deleted.

‎example-react/src/pokemon.component.tsx

-51
This file was deleted.

‎example-react/src/pokemon.island.css

-17
This file was deleted.

‎example-react/src/pokemon.react.island.tsx

-11
This file was deleted.

‎example-react/src/utils.ts

-3
This file was deleted.

‎example-react/tsconfig.json

-24
This file was deleted.

‎example/index.html

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Solid Island</title>
7+
<meta name="viewport" content="width=device-width,initial-scale=1" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
11+
<style>
12+
body {
13+
font-family: 'Inter', sans-serif;
14+
}
15+
16+
.wrapper {
17+
width: 100%;
18+
max-width: 1100px;
19+
margin: 50px auto;
20+
display: grid;
21+
gap: 24px;
22+
}
23+
24+
.code,
25+
.preview {
26+
border: 1px dashed rgba(0, 0, 0, 0.2);
27+
position: relative;
28+
padding: 1rem;
29+
}
30+
31+
.code::before {
32+
content: 'CODE';
33+
position: absolute;
34+
display: block;
35+
top: -18px;
36+
font-size: 11px;
37+
color: rgba(0, 0, 0, 0.5);
38+
}
39+
40+
.preview::before {
41+
content: 'WIDGET PREVIEW';
42+
position: absolute;
43+
display: block;
44+
top: -18px;
45+
font-size: 11px;
46+
color: rgba(0, 0, 0, 0.5);
47+
}
48+
</style>
49+
</head>
50+
51+
<body>
52+
<div class="wrapper">
53+
54+
<h1>Solid Island</h1>
55+
56+
<h2>Portals</h2>
57+
<pre
58+
class="code"><code>&lt;div data-island=&quot;call-to-action&quot; class=&quot;preview&quot;&gt;&lt;/div&gt;</code></pre>
59+
<div data-island="call-to-action" class="preview"></div>
60+
61+
<h2>Props Selector</h2>
62+
<pre
63+
class="code"><code>&lt;div data-island=&quot;email-subscribe&quot; class=&quot;preview&quot;&gt;&lt;/div&gt;&#10;&lt;script data-island-props=&quot; email-subscribe&quot; type=&quot;text/props&quot;&gt;&#10; {&#10; &quot;showName&quot;: true,&#10; &quot;showEmail&quot;: false&#10; }&#10;&lt;/script&gt;</code></pre>
64+
<div data-island="email-subscribe" class="preview"></div>
65+
<script data-island-props="email-subscribe" type="text/props">
66+
{
67+
"showName": true,
68+
"showEmail": false
69+
}
70+
</script>
71+
<h2>Interior Script Props</h2>
72+
<pre
73+
class="code"><code>&lt;div data-island=&quot;pokemon&quot; class=&quot;preview&quot;&gt;&#10; &lt;script type=&quot;text/props&quot;&gt;&#10; { &quot;pokemon&quot;: &quot;1&quot; }&#10; &lt;/script&gt;&#10;&lt;/div&gt;</code></pre>
74+
<div data-island="pokemon" class="preview">
75+
<script type="text/props">
76+
{ "pokemon": "1" }
77+
</script>
78+
</div>
79+
<pre
80+
class="code"><code>&lt;div data-island=&quot;pokemon&quot; class=&quot;preview&quot;&gt;&#10; &lt;script type=&quot;text/props&quot;&gt;&#10; { &quot;pokemon&quot;: &quot;4&quot; }&#10; &lt;/script&gt;&#10;&lt;/div&gt;</code></pre>
81+
<div data-island="pokemon" class="preview">
82+
<script type="text/props">
83+
{ "pokemon": "4" }
84+
</script>
85+
</div>
86+
<pre
87+
class="code"><code>&lt;div data-island=&quot;pokemon&quot; class=&quot;preview&quot;&gt;&#10; &lt;script type=&quot;text/props&quot;&gt;&#10; { &quot;pokemon&quot;: &quot;7&quot; }&#10; &lt;/script&gt;&#10;&lt;/div&gt;</code></pre>
88+
<div data-island="pokemon" class="preview">
89+
<script type="text/props">
90+
{ "pokemon": "7" }
91+
</script>
92+
</div>
93+
</div>
94+
<script src="/src/index.ts" type="module"></script>
95+
</body>
96+
97+
</html>

0 commit comments

Comments
 (0)