{{ `Има още ${totalPages - page} страниц${totalPages - page > 1 ? "и" : "а"}` }}
``` ### Директно предаване на събитие Нека да преработим малко нашия компонент, така че като се натисне да предава събитието към извикващия компонент, който да пали функция. ```vue // components/utilities/LoadMore.vueCurrent theme source: System
``` Създаваме `styles.css` файл в папката `browser` и в него пишем: ```css /* browser/styles.css */ @media (prefers-color-scheme: dark) { body { background: #333; color: white; } } @media (prefers-color-scheme: light) { body { background: #ddd; color: black; } } ``` Добавяме `render.ts` файл в папката `browser` и в него пишем: ```typescript const toggleDarkMode = document.getElementById("toggle-dark-mode"); const themeSource = document.getElementById("theme-source"); if (themeSource && toggleDarkMode) { toggleDarkMode.addEventListener("click", async () => { // @ts-expect-error const isDarkMode = await window.electronAPI.toggle(); themeSource.innerHTML = isDarkMode ? "Dark" : "Light"; toggleDarkMode.innerHTML = `Toggle ${!isDarkMode ? "Dark" : "Light"} Mode`; }); } ``` За да 'компилираме' typescript файла с Parcel ще добавим в папката `.parcelrc` файл и в него ще напишем: ```json // browser/.parcelrc { "extends": "@parcel/config-default", "transformers": { "*.ts": ["@parcel/transformer-typescript-tsc"] } } ``` ## Старт Връщаме се обратно в папката на проекта и редактираме в `package.json` файла полетата **scripts** и **main** : ```json // package.json { "main": "./dist/main.js", "scripts": { "start": "npm run build --prefix ./electron && npm run build --prefix ./browser && electron ." } } ``` В `.gitignore` файла добавяме `dist` и `.parcel-cache` папките и в командния ред изпълняваме: ```bash npm start ``` След старта на приложението, ще се появи папка `dist` в папката на проекта и в нея ще е целия код на Electron приложението. Направил съм репозитори за този проект в [GitHub](https://github.com/howbizarre/electron-typescript-parcel){rel="nofollow"}. --- ::comments{discussions="https://github.com/howbizarre/thoughts/discussions/14"} :: # Vue Router и Main файла При стартиране на нов **Vue** проект, използвам **Quick Start** секцията на сайта на Vue. След това, задължително, правя няколко малки промени, преди да добавя проекта към Source Control банката. От въпросите, които ми задава `npm create vue@latest` почти винаги си избирам: ```shell √ Add TypeScript? ... no / YES √ Add Vue Router for Single Page Application development? ... no / YES √ Add Pinia for state management? ... no / YES √ Add an End-to-End Testing Solution? » Playwright ``` Другите, ако в процеса на разработка се наложат. След изпълнение на всички инструкции, които Ви излизат по екрана, получавате един готов за стартиране проект. Първото нещо, което редактирам е Main файла - `src/main.ts`. В началото той има следния вид: ```typescript import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app') ``` Тук има една малка скрита тайна, която вероятно не знаете. Понякога може да се случи, Vue приложението да се зареди, преди да се инициализира рутера. За да избегна появата на подобни Vue jokes, редактирам `src/main.ts`: ```typescript import "./assets/main.css"; import { createApp } from "vue"; import { createPinia } from "pinia"; import App from "./App.vue"; initializeApp(); async function initializeApp(): Promise{{ `There are ${(totalPages - page)} more page${(totalPages - page) > 1 ? 's' : ''}` }}
``` ### Direct event passing Let's rework our component a bit so that when it is clicked, it passes the event to the calling component, which fires a function. ```vue // components/utilities/LoadMore.vueCurrent theme source: System
``` Creating a `styles.css` file in the `browser` folder and writing the following code in it: ```css /* browser/styles.css */ @media (prefers-color-scheme: dark) { body { background: #333; color: white; } } @media (prefers-color-scheme: light) { body { background: #ddd; color: black; } } ``` Adding a `render.ts` file to the `browser` folder and writing the following code in it: ```typescript const toggleDarkMode = document.getElementById("toggle-dark-mode"); const themeSource = document.getElementById("theme-source"); if (themeSource && toggleDarkMode) { toggleDarkMode.addEventListener("click", async () => { // @ts-expect-error const isDarkMode = await window.electronAPI.toggle(); themeSource.innerHTML = isDarkMode ? "Dark" : "Light"; toggleDarkMode.innerHTML = `Toggle ${!isDarkMode ? "Dark" : "Light"} Mode`; }); } ``` To 'compile' the TypeScript file with Parcel, we will add a `.parcelrc` file in the folder and write the following: ```json // browser/.parcelrc { "extends": "@parcel/config-default", "transformers": { "*.ts": ["@parcel/transformer-typescript-tsc"] } } ``` ## Start We go back to the project folder and edit the **scripts** and **main** fields in the `package.json` file: ```json // package.json { "main": "./dist/main.js", "scripts": { "start": "npm run build --prefix ./electron && npm run build --prefix ./browser && electron ." } } ``` In the `.gitignore` file, we add the `dist` and `.parcel-cache` folders, and in the command line, we execute: ```bash npm start ``` After starting the application, a `dist` folder will appear in the project folder, containing all the code of the Electron application. I have created repositories for this project on [GitHub](https://github.com/howbizarre/electron-typescript-parcel){rel="nofollow"}. --- ::comments{discussions="https://github.com/howbizarre/thoughts/discussions/14"} :: # Vue Router & Main file When starting a new **Vue** project, I use the **Quick Start** section of the Vue website. Then, I make a few small changes before adding the project to the Source Control bank. From the questions that `npm create vue@latest` asks me, I almost always choose: ```shell √ Add TypeScript? ... no / YES √ Add Vue Router for Single Page Application development? ... no / YES √ Add Pinia for state management? ... no / YES √ Add an End-to-End Testing Solution? » Playwright ``` The others, if necessary during development. After executing all the instructions that appear on the screen, you get a project ready to start. The first thing I edit is the Main file - `src/main.ts`. At the beginning, it looks like this: ```typescript import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app') ``` There is a small hidden secret here that you probably don't know. Sometimes, it may happen that the Vue application loads before the router is initialized. To avoid the appearance of such Vue jokes, I edit `src/main.ts`: ```typescript import "./assets/main.css"; import { createApp } from "vue"; import { createPinia } from "pinia"; import App from "./App.vue"; initializeApp(); async function initializeApp(): Promise{{ `Има още ${totalPages - page} страниц${totalPages - page > 1 ? "и" : "а"}` }}
``` ### Директно предаване на събитие Нека да преработим малко нашия компонент, така че като се натисне да предава събитието към извикващия компонент, който да пали функция. ```vue // components/utilities/LoadMore.vueCurrent theme source: System
``` Създаваме `styles.css` файл в папката `browser` и в него пишем: ```css /* browser/styles.css */ @media (prefers-color-scheme: dark) { body { background: #333; color: white; } } @media (prefers-color-scheme: light) { body { background: #ddd; color: black; } } ``` Добавяме `render.ts` файл в папката `browser` и в него пишем: ```typescript const toggleDarkMode = document.getElementById("toggle-dark-mode"); const themeSource = document.getElementById("theme-source"); if (themeSource && toggleDarkMode) { toggleDarkMode.addEventListener("click", async () => { // @ts-expect-error const isDarkMode = await window.electronAPI.toggle(); themeSource.innerHTML = isDarkMode ? "Dark" : "Light"; toggleDarkMode.innerHTML = `Toggle ${!isDarkMode ? "Dark" : "Light"} Mode`; }); } ``` За да 'компилираме' typescript файла с Parcel ще добавим в папката `.parcelrc` файл и в него ще напишем: ```json // browser/.parcelrc { "extends": "@parcel/config-default", "transformers": { "*.ts": ["@parcel/transformer-typescript-tsc"] } } ``` ## Старт Връщаме се обратно в папката на проекта и редактираме в `package.json` файла полетата **scripts** и **main** : ```json // package.json { "main": "./dist/main.js", "scripts": { "start": "npm run build --prefix ./electron && npm run build --prefix ./browser && electron ." } } ``` В `.gitignore` файла добавяме `dist` и `.parcel-cache` папките и в командния ред изпълняваме: ```bash npm start ``` След старта на приложението, ще се появи папка `dist` в папката на проекта и в нея ще е целия код на Electron приложението. Направил съм репозитори за този проект в [GitHub](https://github.com/howbizarre/electron-typescript-parcel){rel="nofollow"}. --- ::comments{discussions="https://github.com/howbizarre/thoughts/discussions/14"} :: # Vue Router и Main файла При стартиране на нов **Vue** проект, използвам **Quick Start** секцията на сайта на Vue. След това, задължително, правя няколко малки промени, преди да добавя проекта към Source Control банката. От въпросите, които ми задава `npm create vue@latest` почти винаги си избирам: ```shell √ Add TypeScript? ... no / YES √ Add Vue Router for Single Page Application development? ... no / YES √ Add Pinia for state management? ... no / YES √ Add an End-to-End Testing Solution? » Playwright ``` Другите, ако в процеса на разработка се наложат. След изпълнение на всички инструкции, които Ви излизат по екрана, получавате един готов за стартиране проект. Първото нещо, което редактирам е Main файла - `src/main.ts`. В началото той има следния вид: ```typescript import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app') ``` Тук има една малка скрита тайна, която вероятно не знаете. Понякога може да се случи, Vue приложението да се зареди, преди да се инициализира рутера. За да избегна появата на подобни Vue jokes, редактирам `src/main.ts`: ```typescript import "./assets/main.css"; import { createApp } from "vue"; import { createPinia } from "pinia"; import App from "./App.vue"; initializeApp(); async function initializeApp(): Promise{{ `There are ${(totalPages - page)} more page${(totalPages - page) > 1 ? 's' : ''}` }}
``` ### Direct event passing Let's rework our component a bit so that when it is clicked, it passes the event to the calling component, which fires a function. ```vue // components/utilities/LoadMore.vueCurrent theme source: System
``` Creating a `styles.css` file in the `browser` folder and writing the following code in it: ```css /* browser/styles.css */ @media (prefers-color-scheme: dark) { body { background: #333; color: white; } } @media (prefers-color-scheme: light) { body { background: #ddd; color: black; } } ``` Adding a `render.ts` file to the `browser` folder and writing the following code in it: ```typescript const toggleDarkMode = document.getElementById("toggle-dark-mode"); const themeSource = document.getElementById("theme-source"); if (themeSource && toggleDarkMode) { toggleDarkMode.addEventListener("click", async () => { // @ts-expect-error const isDarkMode = await window.electronAPI.toggle(); themeSource.innerHTML = isDarkMode ? "Dark" : "Light"; toggleDarkMode.innerHTML = `Toggle ${!isDarkMode ? "Dark" : "Light"} Mode`; }); } ``` To 'compile' the TypeScript file with Parcel, we will add a `.parcelrc` file in the folder and write the following: ```json // browser/.parcelrc { "extends": "@parcel/config-default", "transformers": { "*.ts": ["@parcel/transformer-typescript-tsc"] } } ``` ## Start We go back to the project folder and edit the **scripts** and **main** fields in the `package.json` file: ```json // package.json { "main": "./dist/main.js", "scripts": { "start": "npm run build --prefix ./electron && npm run build --prefix ./browser && electron ." } } ``` In the `.gitignore` file, we add the `dist` and `.parcel-cache` folders, and in the command line, we execute: ```bash npm start ``` After starting the application, a `dist` folder will appear in the project folder, containing all the code of the Electron application. I have created repositories for this project on [GitHub](https://github.com/howbizarre/electron-typescript-parcel){rel="nofollow"}. --- ::comments{discussions="https://github.com/howbizarre/thoughts/discussions/14"} :: # Vue Router & Main file When starting a new **Vue** project, I use the **Quick Start** section of the Vue website. Then, I make a few small changes before adding the project to the Source Control bank. From the questions that `npm create vue@latest` asks me, I almost always choose: ```shell √ Add TypeScript? ... no / YES √ Add Vue Router for Single Page Application development? ... no / YES √ Add Pinia for state management? ... no / YES √ Add an End-to-End Testing Solution? » Playwright ``` The others, if necessary during development. After executing all the instructions that appear on the screen, you get a project ready to start. The first thing I edit is the Main file - `src/main.ts`. At the beginning, it looks like this: ```typescript import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app') ``` There is a small hidden secret here that you probably don't know. Sometimes, it may happen that the Vue application loads before the router is initialized. To avoid the appearance of such Vue jokes, I edit `src/main.ts`: ```typescript import "./assets/main.css"; import { createApp } from "vue"; import { createPinia } from "pinia"; import App from "./App.vue"; initializeApp(); async function initializeApp(): Promise