Skip to content

Commit

Permalink
revert-prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
jennysky committed Dec 9, 2022
1 parent 876efcb commit 77ce332
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 84 deletions.
69 changes: 24 additions & 45 deletions packages/core/src/components/Preview.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import React, {
PropsWithChildren,
useCallback,
useState,
useEffect,
} from "react";
import { ErrorBoundary, FallbackProps } from "react-error-boundary";
import * as reactLib from "react";
import React, { PropsWithChildren, useCallback, useState, useEffect } from "react";
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
import * as reactLib from 'react';
import { transpile } from "../utils/transpiler";
import { Button } from "./Button";

Expand All @@ -23,64 +18,50 @@ const ErrorMessage: React.FC<PropsWithChildren> = ({ children }) => (
</span>
);

const ErrorFallback: React.FC<FallbackProps> = ({
error,
resetErrorBoundary,
}) => {
const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
return (
<div role="alert">
<ErrorMessage>{error.message}</ErrorMessage>
<Button onClick={resetErrorBoundary}>Try again</Button>
</div>
);
};
)
}

const TranspileError: React.FC<{ msg: string }> = ({ msg }) => (
<div role="alert">
<ErrorMessage>{msg}</ErrorMessage>
</div>
);

const TranspiledElement: React.FC<
PropsWithChildren<{ code: string; dependencies: Record<string, any> }>
> = ({ code, dependencies }) => {
const TranspiledElement: React.FC<PropsWithChildren<{ code: string, dependencies: Record<string, any> }>> = ({ code, dependencies }) => {
const [transpiledCode, setTranspiledCode] = useState("");
const [transpiledError, setTranspiledError] = useState("");
useEffect(() => {
(async () => {
const transpiledCode = await transpile(code);
if (transpiledCode instanceof Error) {
setTranspiledError(transpiledCode.message.split("<stdin>:")[1]);
setTranspiledError(transpiledCode.message.split('<stdin>:')[1]);
} else {
setTranspiledError("");
setTranspiledError("")
setTranspiledCode(transpiledCode);
}
})();
}, [code]);
return transpiledError ? (
<TranspileError msg={transpiledError} />
) : transpiledCode ? (
<PreviewElement code={transpiledCode} dependencies={dependencies} />
) : null;
return transpiledError ? <TranspileError msg={transpiledError} /> : (transpiledCode ? <PreviewElement code={transpiledCode} dependencies={dependencies} /> : null)
};

const PreviewElement: React.FC<
PropsWithChildren<{ code: string; dependencies: Record<string, any> }>
> = ({ code, dependencies }) => {
const customRequire = useCallback(
(key: string) => {
const deps = {
...dependencies,
react: reactLib,
};
const res = (deps as any)[key];
if (res) {
return res;
}
throw new Error("dependency: " + key + " not found");
},
[dependencies]
);
const PreviewElement: React.FC<PropsWithChildren<{ code: string, dependencies: Record<string, any> }>> = ({ code, dependencies }) => {
const customRequire = useCallback((key: string) => {
const deps = {
...dependencies,
'react': reactLib,
};
const res = (deps as any)[key];
if (res) {
return res;
}
throw new Error("dependency: " + key + " not found");
}, [dependencies]);

const scope = { require: customRequire };
const _module: any = {
Expand All @@ -96,11 +77,9 @@ const PreviewElement: React.FC<

const Element = _module.exports.default;
return Element ? <Element /> : null;
};
}

export const Preview: React.FC<
PropsWithChildren<{ code: string; dependencies: Record<string, any> }>
> = ({ code, dependencies }) => (
export const Preview: React.FC<PropsWithChildren<{ code: string, dependencies: Record<string, any> }>> = ({ code, dependencies }) => (
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => {
Expand Down
16 changes: 8 additions & 8 deletions packages/docs/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { initialize } from "@ui-blox/core";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import "prismjs/themes/prism-okaidia.css"; //Example style, you can use another
import { initialize } from '@ui-blox/core';
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css';
import 'prismjs/themes/prism-okaidia.css'; //Example style, you can use another

initialize().then(() => {
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
)
});
48 changes: 17 additions & 31 deletions packages/scripts/src/md-to-react.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,39 @@ import { getFileContent } from "./scripts-utils.js";

const replacePropsTable = (content) => {
const ret = content.replace(
"{{props-table}}",
'{{props-table}}',
`<PropsTable table={propsTable} />`
);
);
return ret;
};
}

const replaceBlocks = (content, packagePath) => {
let ret = content;
const searchResult = content.match(/{{.*block.*}}/g);
searchResult?.forEach((block) => {
const blockFile = block.split("block:")[1].slice(0, -2);
const blockContent = getFileContent(
`${packagePath}/data/${blockFile}`
).replace(/`/g, "\\`");
ret = ret.replace(
block,
`<DocsCode dependencies={dependencies} code={\`${blockContent}\`} />`
);
searchResult?.forEach(block => {
const blockFile = block.split('block:')[1].slice(0, -2);
const blockContent = getFileContent(`${packagePath}/data/${blockFile}`).replace(/`/g, '\\`');
ret = ret.replace(block, `<DocsCode dependencies={dependencies} code={\`${blockContent}\`} />`);
});
return ret;
};
}

export const mdToReact = (filePath) => {
const packagePath = path.resolve(filePath, "../../");
const fileName = filePath.split("/").pop().slice(0, -3);
const packagePath = path.resolve(filePath, '../../');
const fileName = filePath.split('/').pop().slice(0, -3);
const dirName = `${packagePath}/src/generated-docs`;

const templateContent = getFileContent(
`${packagePath}/blox/Page.template.hbs`
);
const templateContent = getFileContent(`${packagePath}/blox/Page.template.hbs`);
const mdContent = getFileContent(`${packagePath}/data/${fileName}.md`);

const template = Handlebars.compile(templateContent);
const propsTablePath = mdContent.includes("{{props-table}}")
? `./${fileName}.props-table.json`
: null;
const compiledTemplate = template({
mdContent: marked.parse(mdContent),
name: fileName,
propsTablePath,
});
const propsTablePath = mdContent.includes('{{props-table}}') ? `./${fileName}.props-table.json` : null;
const compiledTemplate = template({ mdContent: marked.parse(mdContent), name: fileName, propsTablePath });

if (!fs.existsSync(dirName)) {
fs.mkdirSync(dirName, { recursive: true });
}
fs.writeFileSync(
`${dirName}/${fileName}Demo.jsx`,
replacePropsTable(replaceBlocks(compiledTemplate, packagePath))
);
};
fs.writeFileSync(`${dirName}/${fileName}Demo.jsx`, replacePropsTable(replaceBlocks(compiledTemplate, packagePath)));
}


0 comments on commit 77ce332

Please sign in to comment.