Skip to content

Commit 23a06d9

Browse files
cibernoxcibernox
committed
Save progress. Not yet working
1 parent 4c002c4 commit 23a06d9

16 files changed

+2937
-161
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,29 @@
55
"dev": "svelte-kit dev",
66
"build": "svelte-kit build",
77
"preview": "svelte-kit preview",
8+
"test": "vitest run",
9+
"test:dev": "vitest dev",
810
"check": "svelte-check --tsconfig ./tsconfig.json",
911
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
1012
},
1113
"devDependencies": {
1214
"@sveltejs/adapter-netlify": "next",
1315
"@sveltejs/kit": "next",
16+
"@testing-library/svelte": "^3.0.3",
1417
"@types/cookie": "^0.4.1",
15-
"svelte": "^3.44.0",
18+
"autoprefixer": "^10.4.0",
19+
"chai-dom": "^1.11.0",
20+
"cssnano": "^5.0.14",
21+
"jsdom": "^19.0.0",
22+
"postcss": "^8.4.5",
23+
"postcss-load-config": "^3.1.0",
24+
"svelte": "^3.45.0",
1625
"svelte-check": "^2.2.11",
1726
"svelte-preprocess": "^4.10.1",
27+
"tailwindcss": "^3.0.11",
1828
"tslib": "^2.3.1",
1929
"typescript": "^4.4.3",
20-
"postcss": "^8.4.5",
21-
"postcss-load-config": "^3.1.0",
22-
"autoprefixer": "^10.4.0",
23-
"cssnano": "^5.0.14",
24-
"tailwindcss": "^3.0.11"
30+
"vitest": "^0.0.138"
2531
},
2632
"type": "module",
2733
"dependencies": {

‎src/lib/code-inline.svelte renamed to ‎src/lib/CodeInline.svelte

File renamed without changes.

‎src/lib/Codeblock.svelte

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script>
2+
export let lang;
3+
export let editable = false;
4+
function highlight(node) {
5+
// @ts-ignore
6+
window.Prism.highlightElement(node);
7+
}
8+
function autofocus(node) {
9+
if (editable) node.focus();
10+
}
11+
12+
</script>
13+
<pre
14+
contenteditable={editable}
15+
use:autofocus
16+
on:change
17+
class="p-4 m-12 rounded bg-code overflow-x-auto">
18+
<code use:highlight class="language-{lang}"><div><slot/></div></code>
19+
</pre>

‎src/lib/definition-entry.svelte renamed to ‎src/lib/DefinitionEntry.svelte

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script>
22
export let background;
33
</script>
4-
<div class="{background === 'gray' ? 'bg-gray-50' : 'bg-white'} px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
4+
<div
5+
data-testid="definition-entry"
6+
class="{background === 'gray' ? 'bg-gray-50' : 'bg-white'} px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
57
<dt class="text-sm font-medium text-gray-500">
68
<slot name="dt"/>
79
</dt>

‎src/lib/nav-link.svelte renamed to ‎src/lib/NavLink.svelte

File renamed without changes.

‎src/lib/Playground.svelte

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script lang="ts">
2+
let translations = `{
3+
"header": "Svelte Intl Precompile is {adjective}",
4+
"posted-on": "Posted on {postDate, date, long}",
5+
"invite-friend": "{name} has joined Svelte! Give {gender, select, male {him} female {her} other {your friend}} a warm welcome!",
6+
"friends-msg": "You have {count, plural, zero {no friend} one {just # friend} other {# friends}}",
7+
}`
8+
let transformedTranslations = "";
9+
let minifiedTranslations = "";
10+
let showMinified = false;
11+
$: output = showMinified ? minifiedTranslations : transformedTranslations;
12+
let timer;
13+
function transform(code) {
14+
fetch('/playground', { method: 'POST', body: code })
15+
.then(r => {
16+
if (r.ok) {
17+
return r.json();
18+
} else {
19+
throw new Error('Invalid syntax');
20+
}
21+
})
22+
.then(({ transformed, minified }) => {
23+
[transformedTranslations, minifiedTranslations] = [transformed, minified];
24+
})
25+
.catch(() => {
26+
// noop
27+
});
28+
}
29+
function debouncedTransform(code) {
30+
clearTimeout(timer);
31+
timer = setTimeout(() => transform(code), 750);
32+
}
33+
34+
$: transformedTranslations === "" ? transform(translations) : debouncedTransform(translations)
35+
</script>
36+
<div>
37+
<label for="email" class="text-sm block mb-2">Translations</label>
38+
<pre
39+
contenteditable
40+
bind:textContent={translations}
41+
class="p-4 m-2 rounded bg-code overflow-x-auto text-sm border ">
42+
<code><div>{translations}</div></code>
43+
</pre>
44+
{translations.length} bytes
45+
</div>
46+
47+
<div>
48+
<div class="flex justify-between">
49+
<label for="email" class="text-sm block mb-2">Output</label>
50+
51+
<label for="show-minified" class="flex items-center">
52+
<input type="checkbox" bind:checked={showMinified} id="show-minified">
53+
<span class="ml-2 text-sm">Show minified output</span>
54+
</label>
55+
</div>
56+
57+
<pre class="p-4 mt-2 rounded bg-code overflow-x-auto text-sm">
58+
<code><div>{output}</div></code>
59+
</pre>
60+
{output.length} bytes
61+
</div>

‎src/lib/playground.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import { t } from "precompile-intl-runtime";
32
let translations = `{
43
"header": "Svelte Intl Precompile is {adjective}",
54
"posted-on": "Posted on {postDate, date, long}",

‎src/routes/[...lang]/docs/__layout.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { t, locale } from 'svelte-intl-precompile';
3-
import NavLink from '$lib/nav-link.svelte';
3+
import NavLink from '$lib/NavLink.svelte';
44
</script>
55

66
<nav class="fixed w-76 h-screen shadow-xl bg-gray-500">

‎src/routes/[...lang]/docs/configuration.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<script lang="ts">
55
import { t } from 'svelte-intl-precompile';
66
import scrollToHash from '$lib/scroll-to-hash';;
7-
import CodeInline from '$lib/code-inline.svelte';
8-
import Codeblock from '$lib/codeblock.svelte';
9-
import DefinitionEntry from '$lib/definition-entry.svelte';
7+
import CodeInline from '$lib/CodeInline.svelte';
8+
import Codeblock from '$lib/Codeblock.svelte';
9+
import DefinitionEntry from '$lib/DefinitionEntry.svelte';
1010
scrollToHash();
1111
</script>
1212

‎src/routes/[...lang]/docs/getting-started.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
<script lang="ts">
66
import { t } from 'svelte-intl-precompile';
7-
import Codeblock from '$lib/codeblock.svelte';
8-
import CodeInline from '$lib/code-inline.svelte';
7+
import Codeblock from '$lib/Codeblock.svelte';
8+
import CodeInline from '$lib/CodeInline.svelte';
99
import scrollToHash from '$lib/scroll-to-hash';;
1010
scrollToHash();
1111
</script>

‎src/routes/[...lang]/docs/introduction.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script context="module" lang="ts">
2-
import Playground from "$lib/playground.svelte";
2+
import Playground from "$lib/Playground.svelte";
33
import { t } from "precompile-intl-runtime";
44
export const prerender = true;
55
</script>

‎src/routes/[...lang]/docs/playground.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<script lang="ts">
66
import { t } from "precompile-intl-runtime";
7-
import Playground from "$lib/playground.svelte";
7+
import Playground from "$lib/Playground.svelte";
88
</script>
99

1010
<svelte:head>

‎svelte.config.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,20 @@ import preprocess from 'svelte-preprocess';
22
import netlify from '@sveltejs/adapter-netlify';
33
import precompileIntl from "svelte-intl-precompile/sveltekit-plugin";
44

5+
export const sveltekitViteConfig = {
6+
plugins: [
7+
precompileIntl('locales') // if your translations are defined in /locales/[lang].json
8+
],
9+
ssr: {
10+
external: ['@babel/core', 'babel-plugin-precompile-intl']
11+
},
12+
// resolve: {
13+
// alias: {
14+
// $lib: path.resolve('./src/lib'),
15+
// },
16+
// },
17+
}
18+
519
/** @type {import('@sveltejs/kit').Config} */
620
const config = {
721
// Consult https://github.com/sveltejs/svelte-preprocess
@@ -16,14 +30,7 @@ const config = {
1630
adapter: netlify(),
1731
// hydrate the <div id="svelte"> element in src/app.html
1832
target: "#svelte",
19-
vite: {
20-
plugins: [
21-
precompileIntl('locales') // if your translations are defined in /locales/[lang].json
22-
],
23-
ssr: {
24-
external: ['@babel/core', 'babel-plugin-precompile-intl']
25-
}
26-
}
33+
vite: sveltekitViteConfig
2734
},
2835
};
2936

‎tests/DefinitionEntrt.test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { cleanup, render } from '@testing-library/svelte'
2+
import DefinitionEntry from '$lib/DefinitionEntry.svelte';
3+
import DefinitionEntry from '../src/lib/DefinitionEntry.svelte';
4+
5+
describe('DefinitionEntry.svelte', () => {
6+
// TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
7+
afterEach(() => cleanup())
8+
9+
it('renders a link with the given href', () => {
10+
const { getByTestId } = render(DefinitionEntry, { background: 'gray' })
11+
console.log("getByTestId('definition-entry')", getByTestId('definition-entry'));
12+
console.log("to.have->", expect(getByTestId('definition-entry')).to.have);
13+
console.log("to.have.class->", expect(getByTestId('definition-entry')).to.have.class);
14+
debugger;
15+
expect(getByTestId('definition-entry')).to.have.class('bg-gray-50');
16+
});
17+
});

‎vitest.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineConfig } from 'vite'
2+
import { svelte } from '@sveltejs/vite-plugin-svelte'
3+
import { sveltekitViteConfig } from './svelte.config.js'
4+
5+
export default defineConfig({
6+
...sveltekitViteConfig,
7+
plugins: [
8+
svelte({ hot: !process.env.VITEST }),
9+
],
10+
test: {
11+
global: true,
12+
environment: 'jsdom',
13+
},
14+
})

0 commit comments

Comments
 (0)