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:

Arkellys

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.

1. Read the docs
2. Adding Electron to an existing React app
3. Common issues

---

Arkellys

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) {

Arkellys

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",

Arkellys

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) {

Arkellys

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
 */