Skip to content

Commit 9849baf

Browse files
TommertomTommertom
Tommertom
authored and
Tommertom
committed
2 parents c2039a2 + 301a6d2 commit 9849baf

File tree

5 files changed

+55
-54
lines changed

5 files changed

+55
-54
lines changed

‎demo-app/package.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,25 @@
1919
"doctoc": "doctoc README.md"
2020
},
2121
"devDependencies": {
22-
"@sveltejs/adapter-static": "^1.0.1",
23-
"@sveltejs/kit": "next",
24-
"@typescript-eslint/eslint-plugin": "^5.45.0",
25-
"@typescript-eslint/parser": "^5.45.0",
22+
"@sveltejs/adapter-static": "^3",
23+
"@sveltejs/kit": "^2",
24+
"@typescript-eslint/eslint-plugin": "^6",
25+
"@typescript-eslint/parser": "^6",
2626
"eslint": "^8.28.0",
27-
"eslint-config-prettier": "^8.5.0",
28-
"eslint-plugin-svelte3": "^4.0.0",
29-
"ionicons": "^6.1.3",
30-
"prettier": "^2.8.0",
31-
"prettier-plugin-svelte": "^2.8.1",
32-
"svelte": "^3.53.1",
33-
"svelte-check": "^2.9.2",
27+
"eslint-config-prettier": "^9",
28+
"eslint-plugin-svelte": "^2",
29+
"ionicons": "^7",
30+
"prettier": "^3",
31+
"prettier-plugin-svelte": "^3",
32+
"svelte": "^4",
33+
"svelte-check": "^3",
3434
"svelte-highlight": "^7.1.2",
35-
"svelte-preprocess": "^4.10.7",
36-
"sveltekit-superforms": "^0.8.1",
35+
"svelte-preprocess": "^6",
36+
"sveltekit-superforms": "^2",
3737
"tslib": "^2.4.1",
38-
"typescript": "^4.9.3",
39-
"vite": "^4.3.4",
40-
"vite-plugin-pwa": "^0.14.1",
38+
"typescript": "^5",
39+
"vite": "^5",
40+
"vite-plugin-pwa": "^0.20",
4141
"zod": "^3.21.4"
4242
},
4343
"type": "module",

‎demo-app/src/routes/components/Inputs/+page.svelte

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,23 @@
22
import SourceButton from '$lib/components/SourceButton.svelte';
33
import { alertController, IonPage } from 'ionic-svelte';
44
5-
import { superForm, setMessage, setError } from 'sveltekit-superforms/client';
5+
import { superForm, defaults, setMessage, setError } from 'sveltekit-superforms';
6+
import { zod } from 'sveltekit-superforms/adapters';
67
import { z } from 'zod';
78
89
const userSchema = z.object({
910
firstName: z.string().min(2).default(''),
1011
lastName: z.string().min(2).default('')
1112
});
1213
13-
type User = z.infer<typeof userSchema>; // not used - but usefull
14-
15-
const { form, errors, message, constraints, enhance, delayed, validate } = superForm(
16-
{ firstName: '', lastName: '' },
14+
const { form, errors, message, constraints, enhance, delayed, validate } = superForm(defaults(zod(userSchema)),
1715
{
1816
SPA: true,
19-
validators: userSchema,
17+
validators: zod(userSchema),
2018
onUpdate(form) {
2119
console.log('SUBMIT clicked, received form', form);
2220
},
23-
onError({ result, message }) {
21+
onError({ result }) {
2422
console.log('ERROR received', result, message);
2523
message.set(result.error.message);
2624
},

‎demo-app/tsconfig.json

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,16 @@
99
"skipLibCheck": true,
1010
"sourceMap": true,
1111
"strict": true,
12-
"typeRoots": ["./node_modules/ionic-svelte"],
13-
"types": ["ionic-svelte"]
12+
"typeRoots": [
13+
"./node_modules/ionic-svelte"
14+
],
15+
"types": [
16+
"ionic-svelte"
17+
],
18+
"verbatimModuleSyntax": true
1419
}
1520
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
1621
//
1722
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
1823
// from the referenced tsconfig.json - TypeScript does not merge them in
19-
}
24+
}

‎packages/create-capacitor-svelte-app/src/creator.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -323,44 +323,43 @@ function createSvelteKitLayout(opts) {
323323
const str = `<script${opts.types == 'typescript' ? ` lang='ts'` : ''}>
324324
import { setupIonicBase } from 'ionic-svelte';
325325
326-
/* Call Ionic's setup routine */
326+
/* Call Ionic's setup routine. */
327327
setupIonicBase();
328328
329-
/* Import all components - or do partial loading - see below */
329+
/* Import all components. (You can selectively import components instead; see below.) */
330330
import 'ionic-svelte/components/all';
331331
332332
/* Theme variables */
333333
import '../theme/variables.css';
334334
335335
/*
336-
This part - import 'ionic-svelte/components/all'; - loads all components at once.
336+
This part - import 'ionic-svelte/components/all'; - loads all components at once. Importing this way adds 80 components and >800kb (uncompressed) to your bundle.
337337
338-
This adds at least >800kb (uncompressed) to your bundle - 80 components (so do your math!!)
338+
Alternately, you can choose to import only the components you want to use.
339339
340-
You can also choose to import each component you want to use separately and leave out others.
340+
Doing selective imports in this file is recommended because you only have to do such imports once.
341+
If you like to code-split differently, you are free to import whereever you like.
341342
342-
It is recommended to do this in this file, as you only need to do such once. But you are free
343-
to do this elsewhere if you like to code-split differently.
343+
Example: If you replace the line import 'ionic-svelte/components/all'; with the imports below, the resulting bundle becomes much smaller.
344344
345-
Example: if you replace the line import 'ionic-svelte/components/all'; with the imports below, you will see the resulting bundle being much smaller
346-
347345
import 'ionic-svelte/components/ion-app';
348346
import 'ionic-svelte/components/ion-card';
349347
import 'ionic-svelte/components/ion-card-title';
350348
import 'ionic-svelte/components/ion-card-subtitle';
351349
import 'ionic-svelte/components/ion-card-header';
352350
import 'ionic-svelte/components/ion-card-content';
353-
import 'ionic-svelte/components/ion-chip';
354351
import 'ionic-svelte/components/ion-button';
352+
import 'ionic-svelte/components/ion-item';
353+
import 'ionic-svelte/components/ion-label';
355354
356-
Click the ionic-svelte-components-all-import above to go to the full list of possible imports.
355+
To see the full list of possible imports, click ionic-svelte-components-all-import above.
357356
358-
Please don't forget to import ion-app in this file when you decide to code-split:
357+
When you decide to do selective imports, ion-app must be imported in this file like this:
359358
360359
import 'ionic-svelte/components/ion-app';
361360
362-
You can report issues here - https://github.com/Tommertom/svelte-ionic-npm/issues
363-
Want to know what is happening more - follow me on Twitter - https://twitter.com/Tommertomm
361+
Report issues here - https://github.com/Tommertom/svelte-ionic-npm/issues
362+
Want to know more about what is happening? Follow me on X! - https://x.com/Tommertomm
364363
Discord channel on Ionic server - https://discordapp.com/channels/520266681499779082/1049388501629681675
365364
*/
366365
</script>

‎packages/create-ionic-svelte-app/src/creator.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -311,44 +311,43 @@ function createSvelteKitLayout(opts) {
311311
const str = `<script${opts.types == 'typescript' ? ` lang='ts'` : ''}>
312312
import { setupIonicBase } from 'ionic-svelte';
313313
314-
/* Call Ionic's setup routine */
314+
/* Call Ionic's setup routine. */
315315
setupIonicBase();
316316
317-
/* Import all components - or do partial loading - see below */
317+
/* Import all components. (You can selectively import components instead; see below.) */
318318
import 'ionic-svelte/components/all';
319319
320320
/* Theme variables */
321321
import '../theme/variables.css';
322322
323323
/*
324-
This part - import 'ionic-svelte/components/all'; - loads all components at once.
324+
This part - import 'ionic-svelte/components/all'; - loads all components at once. Importing this way adds 80 components and >800kb (uncompressed) to your bundle.
325325
326-
This adds at least >800kb (uncompressed) to your bundle - 80 components (so do your math!!)
326+
Alternately, you can choose to import only the components you want to use.
327327
328-
You can also choose to import each component you want to use separately and leave out others.
328+
Doing selective imports in this file is recommended because you only have to do such imports once.
329+
If you like to code-split differently, you are free to import whereever you like.
329330
330-
It is recommended to do this in this file, as you only need to do such once. But you are free
331-
to do this elsewhere if you like to code-split differently.
332-
333-
Example: if you replace the line import 'ionic-svelte/components/all'; with the imports below, you will see the resulting bundle being much smaller
331+
Example: If you replace the line import 'ionic-svelte/components/all'; with the imports below, the resulting bundle becomes much smaller.
334332
335333
import 'ionic-svelte/components/ion-app';
336334
import 'ionic-svelte/components/ion-card';
337335
import 'ionic-svelte/components/ion-card-title';
338336
import 'ionic-svelte/components/ion-card-subtitle';
339337
import 'ionic-svelte/components/ion-card-header';
340338
import 'ionic-svelte/components/ion-card-content';
341-
import 'ionic-svelte/components/ion-chip';
342339
import 'ionic-svelte/components/ion-button';
340+
import 'ionic-svelte/components/ion-item';
341+
import 'ionic-svelte/components/ion-label';
343342
344-
Click the ionic-svelte-components-all-import above to go to the full list of possible imports.
343+
To see the full list of possible imports, click ionic-svelte-components-all-import above.
345344
346-
Please don't forget to import ion-app in this file when you decide to code-split:
345+
When you decide to do selective imports, ion-app must be imported in this file like this:
347346
348347
import 'ionic-svelte/components/ion-app';
349348
350-
You can report issues here - https://github.com/Tommertom/svelte-ionic-npm/issues
351-
Want to know what is happening more - follow me on Twitter - https://twitter.com/Tommertomm
349+
Report issues here - https://github.com/Tommertom/svelte-ionic-npm/issues
350+
Want to know more about what is happening? Follow me on X! - https://x.com/Tommertomm
352351
Discord channel on Ionic server - https://discordapp.com/channels/520266681499779082/1049388501629681675
353352
*/
354353
</script>

0 commit comments

Comments
 (0)