mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-12 17:55:16 +03:00
152 lines
4 KiB
JavaScript
Executable file
152 lines
4 KiB
JavaScript
Executable file
#!/usr/bin/env node
|
|
const fs = require("fs/promises");
|
|
const path = require("path");
|
|
|
|
/**
|
|
* Unsophisticated script to create a styled, unit-tested react component.
|
|
* -filePath / -f : path to the component to be created, including new component name, excluding extension, relative to src
|
|
* -withStyle / -s : optional, flag to create a style file for the component. Defaults to false.
|
|
*
|
|
* eg:
|
|
* ```
|
|
* node srcipts/make-react-component.js -f components/toasts/NewToast -s
|
|
* ```
|
|
* creates files:
|
|
* - src/components/toasts/NewToast.tsx
|
|
* - test/components/toasts/NewToast-test.tsx
|
|
* - res/css/components/toasts/_NewToast.pcss
|
|
*
|
|
*/
|
|
|
|
const TEMPLATES = {
|
|
COMPONENT: `
|
|
import React from 'react';
|
|
|
|
interface Props {}
|
|
|
|
const %%ComponentName%%: React.FC<Props> = () => {
|
|
return <div className='mx_%%ComponentName%%' />;
|
|
};
|
|
|
|
export default %%ComponentName%%;
|
|
`,
|
|
TEST: `
|
|
import React from "react";
|
|
import { render } from "@testing-library/react";
|
|
|
|
import %%ComponentName%% from '%%RelativeComponentPath%%';
|
|
|
|
describe("<%%ComponentName%% />", () => {
|
|
const defaultProps = {};
|
|
const getComponent = (props = {}) =>
|
|
render(<%%ComponentName%% {...defaultProps} {...props} />);
|
|
|
|
it("matches snapshot", () => {
|
|
const { asFragment } = getComponent();
|
|
expect(asFragment()).toMatchSnapshot()();
|
|
});
|
|
});
|
|
`,
|
|
STYLE: `
|
|
.mx_%%ComponentName%% {
|
|
|
|
}
|
|
`,
|
|
};
|
|
|
|
const options = {
|
|
alias: {
|
|
filePath: "f",
|
|
withStyle: "s",
|
|
},
|
|
};
|
|
|
|
const args = require("minimist")(process.argv, options);
|
|
|
|
const ensureDirectoryExists = async (filePath) => {
|
|
const dirName = path.parse(filePath).dir;
|
|
|
|
try {
|
|
await fs.access(dirName);
|
|
return;
|
|
} catch (error) {}
|
|
|
|
await fs.mkdir(dirName, { recursive: true });
|
|
};
|
|
|
|
const makeFile = async ({ filePath, componentName, extension, base, template, prefix, componentFilePath }) => {
|
|
const newFilePath = path.join(
|
|
base,
|
|
path.dirname(filePath),
|
|
`${prefix || ""}${path.basename(filePath)}${extension}`,
|
|
);
|
|
await ensureDirectoryExists(newFilePath);
|
|
|
|
const relativePathToComponent = path.parse(path.relative(path.dirname(newFilePath), componentFilePath || ""));
|
|
const importComponentPath = path.join(relativePathToComponent.dir, relativePathToComponent.name);
|
|
|
|
try {
|
|
await fs.writeFile(newFilePath, fillTemplate(template, componentName, importComponentPath), { flag: "wx" });
|
|
console.log(`Created ${path.relative(process.cwd(), newFilePath)}`);
|
|
return newFilePath;
|
|
} catch (error) {
|
|
if (error.code === "EEXIST") {
|
|
console.log(`File already exists ${path.relative(process.cwd(), newFilePath)}`);
|
|
return newFilePath;
|
|
} else {
|
|
throw error;
|
|
}
|
|
}
|
|
};
|
|
|
|
const fillTemplate = (template, componentName, relativeComponentFilePath, skinnedSdkPath) =>
|
|
template
|
|
.replace(/%%ComponentName%%/g, componentName)
|
|
.replace(/%%RelativeComponentPath%%/g, relativeComponentFilePath);
|
|
|
|
const makeReactComponent = async () => {
|
|
const { filePath, withStyle } = args;
|
|
|
|
if (!filePath) {
|
|
throw new Error("No file path provided, did you forget -f?");
|
|
}
|
|
|
|
const componentName = filePath.split("/").slice(-1).pop();
|
|
|
|
const componentFilePath = await makeFile({
|
|
filePath,
|
|
componentName,
|
|
base: "src",
|
|
extension: ".tsx",
|
|
template: TEMPLATES.COMPONENT,
|
|
});
|
|
await makeFile({
|
|
filePath,
|
|
componentFilePath,
|
|
componentName,
|
|
base: "test",
|
|
extension: "-test.tsx",
|
|
template: TEMPLATES.TEST,
|
|
componentName,
|
|
});
|
|
if (withStyle) {
|
|
await makeFile({
|
|
filePath,
|
|
componentName,
|
|
base: "res/css",
|
|
prefix: "_",
|
|
extension: ".pcss",
|
|
template: TEMPLATES.STYLE,
|
|
});
|
|
}
|
|
};
|
|
|
|
// Wrapper since await at the top level is not well supported yet
|
|
function run() {
|
|
(async function () {
|
|
await makeReactComponent();
|
|
})();
|
|
}
|
|
|
|
run();
|
|
return;
|