diff --git a/03-slot-card/README.md b/03-slot-card/README.md index e820888..58becd0 100644 --- a/03-slot-card/README.md +++ b/03-slot-card/README.md @@ -1,6 +1,6 @@ # Summary -In React we are used to the _children_ property of a componente, when we work +In React we are used to the _children_ property of a component, when we work with Svelte we get _Slots_ and this includes some extra goodies: - We can have a single slot or multiple named slots. @@ -9,7 +9,7 @@ with Svelte we get _Slots_ and this includes some extra goodies: # Step By Step Guide -- This example will take a starting point _00-scratch-typescript_ +- This example will take a starting point _00-boiler-typescript_ - Let's install the packages. @@ -60,9 +60,9 @@ _./src/common/index.ts_ export { default as CardComponent } from "./card.svelte"; ``` -Let's instantiate two instance of the component in our main _app_ +Let's add two instances of the component in our main _App_: -_./src/app.svelte_ +_./src/App.svelte_ ```sv - -
-- -- -+ -+

Body Card A

-+
-+ -+

Body Card B

-+
-
+ + +
+- +- ++ ++

Body Card A

++
++ ++

Body Card B

++
+
``` - So far so good, but what if we want to include a new slot for the card heading? @@ -130,21 +130,21 @@ _./src/app.svelte_ _./src/common/card.svelte_ ```diff -
- -
-+ -

Default header

-+
+
+ +
++ +

Default header

++
+
+ +
+- ++ +

Default body

+
+
- -
-- -+ -

Default body

-
-
-
``` - Now we got to named slots, let's define them in our card: @@ -152,18 +152,18 @@ _./src/common/card.svelte_ _./src/app.svelte_ ```diff -
- -+

Header Card A

--

Body Card A

-+

Body Card A

-
- -+

Header Card B

--

Body Card B

-+

Body Card B

-
-
+
+ ++

Header Card A

+-

Body Card A

++

Body Card A

+
+ ++

Header Card B

+-

Body Card B

++

Body Card B

+
+
``` We can have some additional control: diff --git a/03-slot-card/package-lock.json b/03-slot-card/package-lock.json index c732276..039db75 100644 --- a/03-slot-card/package-lock.json +++ b/03-slot-card/package-lock.json @@ -11,7 +11,7 @@ "@sveltejs/vite-plugin-svelte": "^1.0.1", "@tsconfig/svelte": "^3.0.0", "prettier-plugin-svelte": "^2.7.0", - "svelte": "^3.49.0", + "svelte": "^3.50.1", "svelte-check": "^2.8.0", "svelte-preprocess": "^4.10.7", "tslib": "^2.4.0", @@ -1284,9 +1284,9 @@ } }, "node_modules/svelte": { - "version": "3.49.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz", - "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==", + "version": "3.50.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", + "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==", "dev": true, "engines": { "node": ">= 8" @@ -2295,9 +2295,9 @@ "dev": true }, "svelte": { - "version": "3.49.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz", - "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==", + "version": "3.50.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", + "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==", "dev": true }, "svelte-check": { diff --git a/03-slot-card/package.json b/03-slot-card/package.json index c7b1985..e12b601 100644 --- a/03-slot-card/package.json +++ b/03-slot-card/package.json @@ -13,7 +13,7 @@ "@sveltejs/vite-plugin-svelte": "^1.0.1", "@tsconfig/svelte": "^3.0.0", "prettier-plugin-svelte": "^2.7.0", - "svelte": "^3.49.0", + "svelte": "^3.50.1", "svelte-check": "^2.8.0", "svelte-preprocess": "^4.10.7", "tslib": "^2.4.0",