From d052f7c7184701caf1e0e0ffc716c24f4b6cee17 Mon Sep 17 00:00:00 2001 From: Picorims Date: Tue, 1 Nov 2022 21:56:01 +0100 Subject: [PATCH 01/65] bump version --- CHANGELOG.md | 3 +++ js/index.js | 2 +- package-lock.json | 4 ++-- package.json | 10 +++++----- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b1af622..3197835f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ This document is based on Keep a Changelog 1.0.0 https://keepachangelog.com/en/1.0.0/ +## 0.3.2-indev (????-??-??) + + ## 0.3.1-beta (2022-11-01) ### Fixed diff --git a/js/index.js b/js/index.js index 7d354ed2..72493ec0 100644 --- a/js/index.js +++ b/js/index.js @@ -19,7 +19,7 @@ const {ipcRenderer} = require("electron"); /** @type {String} current build version*/ -const software_version = "0.3.1-beta"; +const software_version = "0.3.2-indev"; /** @type {String} current build type */ let working_dir; //working directory for user, temp, logs... let root_dir; //root of the app (where main.js is located, and html/css folders) diff --git a/package-lock.json b/package-lock.json index 6710923d..20791f22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wav2bar", - "version": "0.3.1-beta", + "version": "0.3.2-indev", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "wav2bar", - "version": "0.3.1-beta", + "version": "0.3.2-indev", "license": "GPL-3.0-or-later", "dependencies": { "colors": "^1.4.0", diff --git a/package.json b/package.json index a91c6724..49e851bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wav2bar", - "version": "0.3.1-beta", + "version": "0.3.2-indev", "description": "A tool to create and export audio visualization mainly for the music industry", "main": "main.js", "scripts": { @@ -80,7 +80,7 @@ "name": "Wav2Bar", "shortcutFolderName": "Wav2Bar", "manufacturer": "Picorims", - "version": "0.3.1", + "version": "0.3.2", "iconPath": "D:/wav2bar_wix_imgs_U/wav2bar_square_logo.ico", "ui": { "chooseDirectory": true, @@ -104,8 +104,8 @@ "homepage": "https://picorims.github.io/wav2bar-website", "icon": "assets/icons/wav2bar_square_logo.png", "maintainer": "Picorims", - "revision": "0.3.1", - "version": "0.3.1" + "revision": "0.3.2", + "version": "0.3.2" } } }, @@ -123,7 +123,7 @@ "homepage": "https://picorims.github.io/wav2bar-website", "icon": "assets/icons/wav2bar_square_logo.png", "license": "GPL-3.0-or-later", - "version": "0.3.1" + "version": "0.3.2" } } } From 5e661aef96b3189b7458f9ee7610f9ed1b9e8491 Mon Sep 17 00:00:00 2001 From: Picorims Date: Fri, 4 Nov 2022 23:24:40 +0100 Subject: [PATCH 02/65] setup skeleton for creating web components easily --- docs/DEVELOPMENT_GUIDELINES.md | 72 ++++++++++++++- docs/modules.plantuml | 6 ++ docs/web_ui_custom_component.plantuml | 34 +++++++ js/index.js | 3 +- js/ui_components/ui_components.js | 9 +- js/ui_components/web_ui_custom_component.js | 88 +++++++++++++++++++ .../web_ui_split_layout.html | 65 ++++++++++++++ .../web_ui_split_layout.js | 26 ++++++ js/utils/log.js | 10 +++ main.js | 2 +- 10 files changed, 309 insertions(+), 6 deletions(-) create mode 100644 docs/web_ui_custom_component.plantuml create mode 100644 js/ui_components/web_ui_custom_component.js create mode 100644 js/ui_components/web_ui_split_layout/web_ui_split_layout.html create mode 100644 js/ui_components/web_ui_split_layout/web_ui_split_layout.js diff --git a/docs/DEVELOPMENT_GUIDELINES.md b/docs/DEVELOPMENT_GUIDELINES.md index 6f12855d..602d21b4 100644 --- a/docs/DEVELOPMENT_GUIDELINES.md +++ b/docs/DEVELOPMENT_GUIDELINES.md @@ -14,6 +14,7 @@ - [About the global context](#about-the-global-context) - [About Node integration in the renderer process](#about-node-integration) - [Documenting](#documenting) +- [Creating UI components](#ui-components) - [Versioning and Git](#versioning-and-git) - [Questions or concerns ?](#questions-or-context) - [FAQ](#faq) @@ -95,6 +96,8 @@ See `README.md`. ## Code styling ### Formatting + +#### JS |Type |Formatting |example | |- |- |- | |variable |snake case |`my_var` | @@ -108,6 +111,12 @@ See `README.md`. |get/set property |snake case |`my_property` | |module name |snake case |`module_name` | +#### CSS +|Type |Formatting |example | +|- |- |- | +|id |snake case |`#my_id` | +|class |snake case |`.my_class` | + ### Tabs 4 spaces. @@ -166,11 +175,11 @@ JSDoc decorators `/** @abstract */` and `/** @override */` are used above classe ## Modules and packages structuring Modules are grouped by theme, area or functionality. A package is represented by the following: -- a folder named after the package nam; +- a folder named after the package name; - a main aggregating module named after the package name, that only serves to export sub modules so they can be all imported through one single module; - one or more submodules implementing features. Multiple functions or class can be grouped in one module if they are part of the same feature or have a very close relationship. (inheritence of a specific feature that still describe the same feature, group of utilities for the same group of usages, etc.) -JavaScript file not part of a package (i.e lying directly in the `js` folder) belongs to the global context. They share the same context together (so global variables and function definitions for example). Right now it is the main "module" at the head of all modules. +A JavaScript file not part of a package (i.e lying directly in the `js` folder) belongs to the global context. They share the same context together (so global variables and function definitions for example). Right now it is the main "module" at the head of all modules. > Note: Their relationship is documented at `docs/modules.plantuml` and `docs/out/modules/modules.svg`. @@ -218,9 +227,66 @@ Here is the list of things that should be documented: All the documentation is written in the `docs` folder and should be saved in git friendly, text based formats. + + +## Creating UI components + +Web components are prefered over the older approach of components through classes and are in fact an evolution of it. + +In the previous approach, every component is an extension of a class encapsulating a div and some utility functions. Every component can both have a UI parent and a DOM parent in order to be compatible with the DOM. The DOM parent allows to access the DOM nodes while the UI parent allows to use the functionalities of the component itself. This double approach is rather confusing and counter productive. Another caveat is having to instantiate and style all the elements through the JavaScript API, which leads to long constructors affecting readability. Finally, those components are bare bones that requires additional methods to manipulate it like a DOM element. + +[Web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) on the other hand keeps the class approach but integrates perfectly to the native DOM tree and JavaScript APIs. It creates a custom tag resuable anywhere as a classic HTML tag (within chevrons, through createElement, etc.). In addition, the declarated custom properties of the class are accessible through the node instance like any node manipulated in JS. At the same time, since it extends `HTMLElement`, the entire DOM api is supported on those components. Finally, by using HTML templates, the user interface can be written declaratively (to some extent) in a more consise and readable way. Note that web components do not need to be imported, since they are accessed using regular JS APIs instead. (You can use `customElements.get("tag");` to get the class definition.) + +Those aren't as powerful as full featured JS frameworks such as React, Vue, Angular or Svelte, however I do not wish to further complexify this project by bringing in other package managers, compilers, etc. + +### Creating web components the easy way + +While web components comes pretty handy for pure JS development, they are tedious to declare. You need to register them, create a shadow DOM, clone an instance of the template in the constructor (which requires a fetch if we want to separate the template in another file), etc. Thus the process has been abstracted by the `web_ui_custom_component` module. It comes with two important tools: the `webUICustomComponent` class and the `register` asynchronous function. While the class handles creating the DOM shadow and cloning the template, the `register` function defines the element in `customElements` and cache the template. + +To create a component, create a new folder within `ui_components` called `web_`. Create a JS module and an HTML file named the same way inside your newly created folder. In the HTML file, write your UI withing a `