Skip to content

Commit 24c96ee

Browse files
author
Sabbir Ahmed
authored
Merge pull request #805 from ezaz-ahmed/develop
💚 Improved Docs And Code Indentation - Svelte
2 parents c841d6d + b6cd29c commit 24c96ee

1 file changed

Lines changed: 120 additions & 30 deletions

File tree

‎data/svete.json‎

Lines changed: 120 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,110 +6,200 @@
66
"colorPref": "#333",
77
"contents": [{
88
"title": "শুরু",
9-
"items": [{
9+
"items":
10+
[
11+
{
1012
"definition": "npm এর মাধ্যমে vite এর সাহায্যে ইন্সটল করতে",
11-
"code": "\n npm create vite@latest myapp -- --template svelte\n cd myapp\n npm install\n npm run dev"
13+
"code": "\nnpm create vite@latest myapp -- --template svelte\n cd myapp\n npm install\n npm run dev"
14+
},
15+
{
16+
"definition": "কম্পোনেন্ট ফরম্যাট",
17+
"code": "\n<script>\n\n // logic goes here\n</script>\n\n<!-- markup (zero or more items) goes here -->\n\n<style>\n /* styles go here */\n</style>"
1218
}
1319
]
1420
},
1521
{
1622
"title": "এসভেল্ট এর সাধারণ বিষয়াবলি",
17-
"items": [{
18-
"definition": "ভ্যারিয়েবল ডিক্লেয়ার",
19-
"code": "<script> \n let name = 'world'; \n</script> \n<h1>Hello {name}!</h1>"
23+
"items":
24+
[
25+
{
26+
"definition": "এসভেল্ট এ 'Hello world' প্রিন্ট করা",
27+
"code": "\n//App.svelte\n\n<h1>Hello world!</h1>"
28+
},
29+
{
30+
"definition": "ডাটা যুক্ত করা(ভ্যারিয়েবল ডিক্লেয়ার)",
31+
"code": "\n//App.svelte\n\n<script> \n let name = 'world';\n</script> \n\n<h1>Hello {name}!</h1>"
2032
},
2133
{
2234
"definition": "ডায়ন্যামিক অ্যাট্রিবিউট",
23-
"code": "<script> \n let src = 'tutorial/image.gif', widht='100', height='100'; \n</script> \n<img {src} {width} {height}>"
35+
"code": "\n//App.svelte\n\n<script> \n let src = 'tutorial/image.gif', widht='100', height='100';\n</script> \n\n<img {src} {width} {height}>"
2436
},
2537
{
2638
"definition": "কম্পোনেন্ট স্ট্যাইল",
27-
"code": "\n<p>This is a paragraph.</p>\n<style>\np{\n\tcolor: purple;\n}\n</style>"
39+
"code": "\n//App.svelte\n\n<p>This is a paragraph.</p>\n\n<style>\n p{\n color: purple;\n }\n</style>"
2840
},
2941
{
3042
"definition": "নেস্টেড কম্পোনেন্ট",
3143
"code": [
32-
"\n//App.svelte \n<script>\n\t import ChildComponent from './Child.svelte'; \n</script> \n<h2>I'm Parent Component</h2> \n<ChildComponent/> \n",
33-
"\n//Child.svelte \n <h2>I'm Child Component</h2>"
44+
"\n//App.svelte\n\n<script>\n import NestedComponent from './Nested.svelte'; \n</script>\n\n",
45+
"<h2>I'm Parent Component</h2> \n<NestedComponent/> \n",
46+
"\n//Nested.svelte \n\n<h2>I'm Nested Component</h2>"
47+
]
48+
},
49+
{
50+
"definition": "HTML ট্যাগস",
51+
"code": [
52+
"\n//App.svelte\n\n<script>\n let string = `this string contains some <strong>HTML!!!</strong>`; \n</script>\n\n",
53+
"<h2><p>{@html string}</p></h2>\n"
54+
]
55+
}
56+
]
57+
},
58+
{
59+
"title": "এসভেল্ট এর রিয়্যাক্টিভিটি",
60+
"items": [
61+
{
62+
"definition": "এসাইনমেন্ট (Assignment)",
63+
"code": [
64+
"\n//App.svelte \n\n<script>\n let count = 0; \n\n function incrementCount() {\n count += 1;\n }\n</script>\n\n",
65+
"<button on:click={incrementCount}>\n Clicked {count} {count === 1 ? 'time' : 'times'}\n</button>"
66+
]
67+
},
68+
{
69+
"definition": "ডিক্লারেশন (Declarations)",
70+
"code": [
71+
"\n//App.svelte \n\n<script>\n let count = 0; \n\n $: doubled = count * 2;\n\n function handleClick() {\n count += 1;\n }\n</script>\n\n",
72+
"<button on:click={handleClick}>\n Clicked {count} {count === 1 ? 'time' : 'times'}\n</button>\n\n<p>{count} doubled is {doubled}</p>"
73+
]
74+
},
75+
{
76+
"definition": "ষ্টেটমেন্ট (Statements)",
77+
"code": [
78+
"\n//App.svelte \n\n<script>\n let count = 0; \n\n $: if (count >= 10) {\n alert('count is dangerously high!');\n count = 9;\n }\n\n function handleClick() {\n count += 1;\n }\n</script>\n\n",
79+
"<button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>"
80+
]
81+
},
82+
{
83+
"definition": "অ্যারে এবং অবজেক্ট আপডেট",
84+
"code": [
85+
"\n//App.svelte \n\n<script>\n let numbers = [1, 2, 3, 4];\n\n function addNumber() {\n numbers = [...numbers, numbers.length + 1];\n }\n\n $: sum = numbers.reduce((t, n) => t + n, 0);\n</script>\n\n",
86+
"<p>{numbers.join(' + ')} = {sum}</p>\n\n<button on:click={addNumber}>\n Add a number\n</button>"
87+
]
88+
}
89+
]
90+
},
91+
{
92+
"title": "এসভেল্ট এর প্রপস (props)",
93+
"items": [
94+
{
95+
"definition": "প্রপস ডিক্লারেশন",
96+
"code": [
97+
"\n//App.svelte \n\n<script>\n import Nested from './Nested.svelte';\n</script>\n\n",
98+
"<Nested answer={42}/>\n",
99+
"\n//Nested.svelte \n\n<script>\n export let answer;\n</script>\n\n",
100+
"<p>The answer is {answer}</p>"
101+
]
102+
},
103+
{
104+
"definition": "প্রপস এর ডিফল্ট ভ্যালু",
105+
"code": [
106+
"\n//App.svelte \n\n<script>\n import Nested from './Nested.svelte';\n</script>\n\n",
107+
"<Nested answer={42}/>\n<Nested />\n",
108+
"\n//Nested.svelte \n\n<script>\n export let answer = 'a mystery';\n</script>\n\n",
109+
"<p>The answer is {answer}</p>"
34110
]
35111
},
112+
{
113+
"definition": "প্রপস স্প্রেড",
114+
"code": [
115+
"\n//App.svelte \n\n<script>\n import Info from './Info.svelte';\n const pkg = {\n name: 'svelte',\n version: 3,\n speed: 'blazing',\n website: 'https://devsonket.com'\n };\n</script>\n\n",
116+
"<Info {...pkg}/>\n",
117+
"\n//Info.svelte \n\n<script>\n export let name;\n export let version;\n export let speed;\n export let website;\n</script>\n\n",
118+
"<p>The <code>{name}</code> package is {speed} fast. Download version {version} from <a href='https://www.npmjs.com package/{name}'>npm</a> and <a href={website}>learn more here</p>"
119+
]
120+
}
121+
]
122+
},
123+
{
124+
"title": "এসভেল্ট এর অন্যান্য বিষয়াবলি",
125+
"items": [
36126
{
37127
"definition": "নেস্টেড কম্পোনেন্ট এ props পাঠানো",
38128
"code": [
39-
"//App.svelte \n <script>\n import ChildComponent from './Child.svelte'; \n let title = 'I'm Child Component'; \n</script> \n <h2>I'm Parent Component</h2> \n <ChildComponent {title}/> \n",
40-
"\n//Child.svelte \n <script> \n export let title; \n</script> \n<h2>{title || 'Hello world'}</h2>"
129+
"//App.svelte \n\n<script>\n import ChildComponent from './Child.svelte'; \n let title = 'I'm Child Component'; \n</script> \n\n<h2>I'm Parent Component</h2> \n<ChildComponent {title}/> \n",
130+
"\n// Child.svelte \n\n<script> \n export let title; \n</script> \n\n<h2>{title || 'Hello world'}</h2>"
41131
]
42132
},
43133
{
44134
"definition": "ডিফল্ট props",
45135
"code": [
46-
"//App.svelte \n <script>\n import ChildComponent from './Child.svelte'; \n let title = 'I'm Child Component'; \n</script> \n <h2>I'm Parent Component</h2> \n",
47-
"<ChildComponent {title}/> \n <ChildComponent/> \n",
48-
"\n//Child.svelte \n <script> \n export let title = 'Hello world'; \n</script> \n<h2>{title}</h2>"
136+
"//App.svelte \n\n<script>\n import ChildComponent from './Child.svelte'; \n let title = 'I'm Child Component'; \n</script> \n\n<h2>I'm Parent Component</h2> \n",
137+
"<ChildComponent {title}/> \n<ChildComponent/> \n",
138+
"\n//Child.svelte \n\n<script> \n export let title = 'Hello world'; \n</script> \n\n<h2>{title}</h2>"
49139
]
50140
},
51141
{
52142
"definition": "ইভেন্ট হ্যান্ডেলার",
53143
"code": [
54-
"<script> \n let count = 0; \n function incrementCount() { \n\t count += 1; \n } \n</script>\n",
144+
"<script> \n let count = 0; \n function incrementCount() { \n count += 1; \n } \n</script>\n\n",
55145
"<button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>"
56146
]
57147
},
58148
{
59149
"definition": "রিয়্যাক্টিভ অ্যাসাইনমেন্ট",
60150
"code": [
61-
"<script> \n let count = 0; \n $: doubled = count * 2; \n function incrementCount() { \n\t count += 1; \n } \n</script>\n",
151+
"<script> \n let count = 0; \n $: doubled = count * 2; \n function incrementCount() { \n count += 1; \n } \n</script>\n\n",
62152
"<button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>\n",
63153
"<p>{count} doubled is {doubled}</p>"
64154
]
65155
},
66156
{
67157
"definition": "রিয়্যাক্টিভ লজিক",
68158
"code": [
69-
"<script>\n let x = 7;\n </script>\n",
159+
"<script>\n let x = 7;\n</script>\n\n",
70160
"{#if x > 10}\n <p>{x} is greater than 10</p> \n {:else if 5 > x}\n <p>{x} is less than 5</p> \n {:else}\n <p>{x} is between 5 and 10</p>\n {/if}\n"
71161
]
72162
},
73163
{
74164
"definition": "লজিক",
75165
"code": [
76-
"<script> \n let count = 0; \n $: if (count >= 10) { \n alert(`count is dangerously high!`); \n count = 9; \n} \n function incrementCount() { \n count += 1; \n } \n</script>\n",
166+
"<script> \n let count = 0; \n $: if (count >= 10) { \n alert(`count is dangerously high!`); \n count = 9; \n} \n function incrementCount() { \n count += 1; \n } \n</script>\n\n",
77167
"<button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>\n"
78168
]
79169
},
80170
{
81171
"definition": "লুপ",
82172
"code": [
83-
"<script> \n let cats = [ { id: 'J---aiyznGQ', name: 'Keyboard Cat' }, { id: 'z_AbfPXTKms', name: 'Maru' }, { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' } ]; \n</script> \n",
173+
"<script> \n let cats = [{ \n\tid: 'J---aiyznGQ', name: 'Keyboard Cat' }, \n\t{ id: 'z_AbfPXTKms', name: 'Maru' },\n\t{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }]; \n</script> \n\n",
84174
"<h1>The Famous Cats of YouTube</h1>\n",
85-
"{#each cats as { id, name }, i} \n <div> \n <a target='_blank' href='https: //www.youtube.com/watch?v={id}'>{i + 1}: {name}</a> \n </div> \n {/each}"
175+
"{#each cats as { id, name }, i} \n <div> \n <a target='_blank' href='https: //www.youtube.com/watch?v={id}'>{i + 1}: {name}</a> \n </div> \n{/each}"
86176
]
87177
},
88178
{
89179
"definition": "ডম ইভেন্ট হ্যান্ডেলার",
90180
"code": [
91-
"<script> \n let m = { x: 0, y: 0 }; \n function handleMousemove(event) { \n m.x = event.clientX; \n m.y = event.clientY; \n } \n </script> \n",
92-
"<div on:mousemove={handleMousemove}> \n The mouse position is {m.x} x {m.y} \n </div> \n",
93-
"<style> \n div { \n width: 100%; \n height: 100%; \n } \n</style>"
181+
"<script> \n let m = { x: 0, y: 0 }; \n function handleMousemove(event) { \n m.x = event.clientX; \n m.y = event.clientY; \n } \n</script> \n\n",
182+
"<div on:mousemove={handleMousemove}> \n The mouse position is {m.x} x {m.y} \n</div> \n\n",
183+
"<style> \n div { \n width: 100%; \n height: 100%; \n } \n</style>"
94184
]
95185
},
96186
{
97187
"definition": "ইনলাইন ডম ইভেন্ট হ্যান্ডেলার",
98188
"code": [
99-
"<script> \n let m = { x: 0, y: 0 }; \n </script> \n",
100-
"<div on:mousemove='{e => m = { x: e.clientX, y: e.clientY}}'> \n The mouse position is {m.x} x {m.y} \n </div> \n",
101-
"<style> \n div { \n width: 100%; \n height: 100%; \n } \n</style>"
189+
"<script> \n let m = { x: 0, y: 0 }; \n</script> \n\n",
190+
"<div on:mousemove='{e => m = { x: e.clientX, y: e.clientY}}'> \n The mouse position is {m.x} x {m.y} \n</div> \n\n",
191+
"<style> \n div { \n width: 100%; \n height: 100%;\n } \n</style>"
102192
]
103193
},
104194
{
105195
"definition": "কম্পোনেন্ট ইভেন্টস",
106196
"code": [
107197
"//App.svelte ",
108-
"\n <script> \n import Inner from './Inner.svelte'; \n function handleMessage(event) { \n alert(event.detail.text); \n } \n </script> \n",
198+
"\n\n<script> \n import Inner from './Inner.svelte'; \n function handleMessage(event) { \n alert(event.detail.text); \n } \n</script> \n\n",
109199
"<Inner on:message={handleMessage}/>",
110200
"\n\n//Inner.svelte",
111-
"\n <script> \n import { createEventDispatcher } from 'svelte'; \n const dispatch = createEventDispatcher(); \n ",
112-
"function sayHello() { \n dispatch('message', { \n\t text: 'Hello!'}); \n } \n </script> \n",
201+
"\n\n<script> \n import { createEventDispatcher } from 'svelte'; \n const dispatch = createEventDispatcher(); \n ",
202+
" function sayHello() { \n dispatch('message', {text: 'Hello!'}); \n } \n </script> \n\n",
113203
"<button on:click={sayHello}> Click to say hello </button>"
114204
]
115205
},
@@ -170,7 +260,7 @@
170260
"items": [{
171261
"definition": "রাইটেবল(writable)",
172262
"code": [
173-
"import { writable } from 'svelte/store';\n\nconst count = writable(0);\ncount.subscribe(value => {\n\tconsole.log(value);\n}); // logs '0'\ncount.set(1);\ncount.set(1); // logs '1'\ncount.update(n => n + 1); // logs '2'"
263+
"import { writable } from 'svelte/store';\n\nconst count = writable(0);\ncount.subscribe(value => {\n\tconsole.log(value);\n}); // logs '0'\n\ncount.set(1); // logs '1'\ncount.update(n => n + 1); // logs '2'"
174264
]
175265
},
176266
{

0 commit comments

Comments
 (0)