From fdee641ba4d4bf741fc03a320638373380281d46 Mon Sep 17 00:00:00 2001 From: ritik307 Date: Sat, 22 Jan 2022 17:43:57 +0530 Subject: [PATCH 01/10] feat: switch-to-jsx-renderer --- components/common.js | 84 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + template/index.js | 58 ++++++++++++++++++++++++++++++ 3 files changed, 143 insertions(+) create mode 100644 components/common.js create mode 100644 template/index.js diff --git a/components/common.js b/components/common.js new file mode 100644 index 000000000..038d81dc1 --- /dev/null +++ b/components/common.js @@ -0,0 +1,84 @@ +/* + * Below you can see how to create reusable chunks/components/helpers. + * Check the files in the `template` folder to see how to import and use them within a template. + */ + +import { + Indent, + IndentationTypes, + withIndendation, +} from "@asyncapi/generator-react-sdk"; + +/* + * Each component has a `childrenContent` property. + * It is the processed children content of a component into a pure string. You can use it for compositions in your component. + * + * Example: + * function CustomComponent({ childrenContent }) { + * return `some text at the beginning: ${childrenContent}` + * } + * + * function RootComponent() { + * return ( + * + * some text at the end. + * + * ); + * } + * + * then output from RootComponent will be `some text at the beginning: some text at the end.`. + */ +export function HTML({ childrenContent }) { + return ` + + +${childrenContent} + +`; +} + +/* + * If you need indent content inside template you can use `withIndendation` function or wrap content between `Indent` component. + * The mentioned helper and component can be imported from `@asyncapi/generator-react-sdk` package. + * + * `withIndendation` function performs action on pure string, but `Indent` can wraps part of template. + * You can see usage both cases below. + * + * Also you can see how to create components using composition. + * You can use another component with the given parameters for the given use-case. + */ +export function Head({ title, cssLinks = [],base }) { + const links = cssLinks + .map((link) => `\n`) + .join(""); + + const content = ` + + + + ${title} +${withIndendation(links, 2, IndentationTypes.SPACES)} + + +`; + + return ( + + {content} + + ); +} + +export function Body({ childrenContent }) { + const content = ` + +${withIndendation(childrenContent, 2, IndentationTypes.SPACES)} + +`; + + return ( + + {content} + + ); +} diff --git a/package.json b/package.json index dd0a7a757..e15539ea8 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "access": "public" }, "dependencies": { + "@asyncapi/generator-react-sdk": "^0.2.23", "@asyncapi/parser": "^1.13.0", "@asyncapi/react-component": "^1.0.0-next.32", "highlight.js": "10.7.3", diff --git a/template/index.js b/template/index.js new file mode 100644 index 000000000..52f8dacda --- /dev/null +++ b/template/index.js @@ -0,0 +1,58 @@ +import { File } from "@asyncapi/generator-react-sdk"; + +// Import custom components from file +import { HTML, Head, Body } from "../components/common"; + +export default function Index({ asyncapi, params }) { + const getCssLinks = () => { + const cssLinks = []; + if (params.singleFile) { + cssLinks.push("template/css/asyncapi-ui.css"); + cssLinks.push("template/css/asyncapi-ui.css"); + } else { + cssLinks.push("css/asyncapi-ui.css"); + cssLinks.push("css/asyncapi-ui.css"); + } + return cssLinks; + }; + return ( + + + + +
{asyncapi}
+ + + + + ); +} +function Scripts({ params }) { + if (params.singleFile) { + return ` + + + `; + } else { + return ` + + + `; + } +} From 1803ea300c9bdbee1dc6a8660060a5aad40870ab Mon Sep 17 00:00:00 2001 From: ritik307 Date: Wed, 26 Jan 2022 22:05:41 +0530 Subject: [PATCH 02/10] made requested changes --- components/common.js | 36 +----------------------------------- template/index.js | 38 +++++++++++--------------------------- 2 files changed, 12 insertions(+), 62 deletions(-) diff --git a/components/common.js b/components/common.js index 038d81dc1..084d919e8 100644 --- a/components/common.js +++ b/components/common.js @@ -1,33 +1,9 @@ -/* - * Below you can see how to create reusable chunks/components/helpers. - * Check the files in the `template` folder to see how to import and use them within a template. - */ - import { Indent, IndentationTypes, withIndendation, } from "@asyncapi/generator-react-sdk"; -/* - * Each component has a `childrenContent` property. - * It is the processed children content of a component into a pure string. You can use it for compositions in your component. - * - * Example: - * function CustomComponent({ childrenContent }) { - * return `some text at the beginning: ${childrenContent}` - * } - * - * function RootComponent() { - * return ( - * - * some text at the end. - * - * ); - * } - * - * then output from RootComponent will be `some text at the beginning: some text at the end.`. - */ export function HTML({ childrenContent }) { return ` @@ -37,16 +13,6 @@ ${childrenContent} `; } -/* - * If you need indent content inside template you can use `withIndendation` function or wrap content between `Indent` component. - * The mentioned helper and component can be imported from `@asyncapi/generator-react-sdk` package. - * - * `withIndendation` function performs action on pure string, but `Indent` can wraps part of template. - * You can see usage both cases below. - * - * Also you can see how to create components using composition. - * You can use another component with the given parameters for the given use-case. - */ export function Head({ title, cssLinks = [],base }) { const links = cssLinks .map((link) => `\n`) @@ -58,7 +24,7 @@ export function Head({ title, cssLinks = [],base }) { ${title} ${withIndendation(links, 2, IndentationTypes.SPACES)} - + `; diff --git a/template/index.js b/template/index.js index 52f8dacda..7cb57b271 100644 --- a/template/index.js +++ b/template/index.js @@ -1,34 +1,18 @@ import { File } from "@asyncapi/generator-react-sdk"; - -// Import custom components from file +import filter from '../filters/all.js'; import { HTML, Head, Body } from "../components/common"; export default function Index({ asyncapi, params }) { - const getCssLinks = () => { - const cssLinks = []; - if (params.singleFile) { - cssLinks.push("template/css/asyncapi-ui.css"); - cssLinks.push("template/css/asyncapi-ui.css"); - } else { - cssLinks.push("css/asyncapi-ui.css"); - cssLinks.push("css/asyncapi-ui.css"); - } - return cssLinks; - }; return ( -
{asyncapi}
+
{filter.renderSpec(asyncapi,params)}
@@ -38,10 +22,10 @@ export default function Index({ asyncapi, params }) { function Scripts({ params }) { if (params.singleFile) { return ` - + `; @@ -49,9 +33,9 @@ function Scripts({ params }) { return ` `; } From b3f175945aa6efb25c9b74213a19e84348b6ddbe Mon Sep 17 00:00:00 2001 From: ritik307 Date: Thu, 3 Feb 2022 23:02:48 +0530 Subject: [PATCH 03/10] made requested changes --- components/common.js | 11 +++++++++-- template/index.js | 7 +++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/components/common.js b/components/common.js index 084d919e8..34b305b0a 100644 --- a/components/common.js +++ b/components/common.js @@ -13,7 +13,7 @@ ${childrenContent} `; } -export function Head({ title, cssLinks = [],base }) { +export function Head({ title, cssLinks = [], styleContent = [],base }) { const links = cssLinks .map((link) => `\n`) .join(""); @@ -25,6 +25,13 @@ export function Head({ title, cssLinks = [],base }) { ${title} ${withIndendation(links, 2, IndentationTypes.SPACES)} + + + + `; @@ -47,4 +54,4 @@ ${withIndendation(childrenContent, 2, IndentationTypes.SPACES)} {content} ); -} +} \ No newline at end of file diff --git a/template/index.js b/template/index.js index 7cb57b271..faf4976c1 100644 --- a/template/index.js +++ b/template/index.js @@ -8,7 +8,8 @@ export default function Index({ asyncapi, params }) { @@ -22,7 +23,9 @@ export default function Index({ asyncapi, params }) { function Scripts({ params }) { if (params.singleFile) { return ` - + `; @@ -36,10 +35,10 @@ function Scripts({ params }) { return ` `; } -} +} \ No newline at end of file From a3acf7ab0a1d62fab07f888c42705f8acbddcaa9 Mon Sep 17 00:00:00 2001 From: ritik307 Date: Fri, 11 Feb 2022 20:55:14 +0530 Subject: [PATCH 09/10] made requested changes --- package.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 5c4975fb0..791af41dc 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ ] }, "generator": { + "renderer": "react", "parameters": { "sidebarOrganization": { "description": "Defines how the sidebar should be organized. 'byTags' to categorize operations by tags in the root of the document, `byTagsNoRoot` does the same but for pub/sub tags.", @@ -104,10 +105,7 @@ "default": false } }, - "generator": { - "renderer": "react", - "generator":">=1.8.27 <2.0.0" - }, + "generator": ">=1.8.27 <2.0.0", "nonRenderableFiles": [ "js/asyncapi-ui.min.js" ] From c3a53c736e10b1cfcaaf7ab31bf3aac4a828a104 Mon Sep 17 00:00:00 2001 From: ritik307 Date: Tue, 15 Feb 2022 20:54:12 +0530 Subject: [PATCH 10/10] made requested changes --- components/common.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/common.js b/components/common.js index 55a3dc14b..56b2fb398 100644 --- a/components/common.js +++ b/components/common.js @@ -16,14 +16,14 @@ ${childrenContent} export function Head({ title, cssLinks = [], styleContent = [], base = '' }) { const baseTag= ``; const cssLinksData = cssLinks.map(link => ``).join('\n'); - const styleContentData = styleContent.join('\n'); + const styleContentData = styleContent.length ? `` : ''; const content = ` ${base ? baseTag : ''} ${title} - ${styleContentData ? `` : ''} + ${styleContentData ? styleContentData: ''} ${cssLinksData ? cssLinksData : ''} `;