Arkellys

The script will allow creating a new component in the folder src/components. If the given path ends with a component name (detection is made if the last part of the path is in PascalCase), then it will detect the new component created is a sub-component and put it in an subComponents folder. A new export is automatically added (and sorted alphabetically) into the index.js file of the parent folder.

Variables

validFolders → List of folders where a new component can be created
subComponentFolderName → Name of the folder for sub-components

Example

Initial folder structure:

React and Electron, the useful things to know

I like to help folks with their Electron and React problems, but I often have to repeat the same things over and over again. So here is a short guide to some of the most common questions and issues people have.

Read the docs
Adding Electron to an existing React app
Common issues

	/**
	* @import { Merge, ConditionalPick, SharedUnionFieldsDeep } from "type-fest";
	*/


	/**
	* Renames keys from `T` with names specified in `R`.
	* @example
	* Rename.<{ a: 1, b: 2 } \| { a: 3 }, { a: "d" }>
	* 🡒 { d: 1, b: 2 } \| { d: 3 }

	import { useEffect, useState } from "react";


	/**
	* Returns like `useState()` but updates the state when the initial value changes.
	* @param {any} initialValue - Initial value of the state
	* @returns {Array.<any,Function>} State value and setter
	*/

	export function useStateWithEffect(initialValue) {

	import { findAndReplace } from "mdast-util-find-and-replace";

	const commentRegex = /\/\/([^\n\\/]*)\/\//g; // //<value>//

	export default function () {
	function replaceComment(_match, text) {
	return {
	type: "span",
	data: {
	hName: "comment",

	const { readFileSync, writeFileSync } = require("fs");

	try {
	const filePath = "./package.json";
	const entryPath = process.env.ENTRY_PATH;

	let data = readFileSync(filePath, "utf8");
	data = JSON.parse(data);

	if (data.main !== entryPath) {

	import { isEmpty } from "lodash";
	import { useState } from "react";

	/**
	* Submits a form.
	* @callback Submit
	* @param {import("react").SyntheticEvent} event - Form event
	* @param {Function} callback - Method called when the form is valid on submit
	*/