-
-
- Modelina Options
-
-
- Change the generation options, or see the Modelina
- configuration you can use directly in your library
-
-
+ const setNewConfig = (configName: string, configValue: any, updateCode?: boolean) => {
+ setNewQuery(configName, configValue);
+ /* eslint-disable-next-line security/detect-object-injection */
+ (config as any)[configName] = configValue;
+ if (updateCode === true || updateCode === undefined) {
+ generateNewCode(input);
+ }
+ };
-
{
- this.setState({ ...this.state, showGeneratorCode: false });
- }}
- className={`${!this.state.showGeneratorCode ? 'bg-blue-100' : 'bg-white'
- } px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 basis-3/12`}
- >
-
- Options
-
-
-
{
- this.setState({ ...this.state, showGeneratorCode: true });
- }}
- className={`${this.state.showGeneratorCode ? 'bg-blue-100' : 'bg-white'
- } px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 basis-3/12`}
- >
-
- Generator code
-
+ /**
+ * Set a query key and value
+ */
+ const setNewQuery = (queryKey: string, queryValue: any) => {
+ const newQuery = {
+ query: { ...props.router.query }
+ };
+
+ if (queryValue === false) {
+ delete newQuery.query[queryKey];
+ } else {
+ /* eslint-disable-next-line security/detect-object-injection */
+ newQuery.query[queryKey] = String(queryValue);
+ }
+
+ Router.push(newQuery, undefined, { scroll: false });
+ };
+
+ /**
+ * Tell the socket io server that we want some code
+ */
+ const generateNewCode = (input: string) => {
+ try {
+ const message: GenerateMessage = {
+ ...config,
+ input: encode(JSON.stringify(JSON.parse(input)))
+ };
+
+ if (message.input.length > (props.maxInputSize || 30000)) {
+ console.error('Input too large, use a smaller example');
+ setError(true);
+ setErrorMessage('Input too large, use a smaller example');
+ setStatusCode(400);
+ } else {
+ const generators: { [key: string]: Function } = {
+ typescript: getTypeScriptGeneratorCode,
+ javascript: getJavaScriptGeneratorCode,
+ java: getJavaGeneratorCode,
+ go: getGoGeneratorCode,
+ csharp: getCSharpGeneratorCode,
+ rust: getRustGeneratorCode,
+ python: getPythonGeneratorCode,
+ dart: getDartGeneratorCode,
+ cplusplus: getCplusplusGeneratorCode,
+ kotlin: getKotlinGeneratorCode,
+ php: getPhpGeneratorCode
+ };
+
+ const generatorCode = generators[config.language](message);
+
+ fetch(`${process.env.NEXT_PUBLIC_API_PATH}/generate`, {
+ body: JSON.stringify(message),
+ method: 'POST'
+ }).then(async (res) => {
+ if (!res.ok) {
+ throw new Error(res.statusText);
+ }
+
+ const response: UpdateMessage = await res.json();
+ setGeneratorCode(generatorCode);
+ setModels(response.models);
+ setLoaded({
+ ...loaded,
+ hasReceivedCode: true
+ });
+ setError(false);
+ setStatusCode(200);
+ setErrorMessage('');
+ }).catch(error => {
+ console.error(error);
+ setError(true);
+ setErrorMessage("Input is not a correct AsyncAPI document, so it cannot be processed.");
+ setStatusCode(500);
+ });
+ }
+ } catch (e: any) {
+ console.error(e);
+ setError(true);
+ setErrorMessage("Input is not a correct AsyncAPI document, so it cannot be processed.");
+ setStatusCode(400);
+ }
+ };
+
+ if (!isMounted) {
+ return null;
+ }
+
+ return (
+
+ {
+ isLoaded
+ ?
+
+ Loading Modelina Playground. Rendering playground components...
+
+ :
+
+
- {this.state.showGeneratorCode ? (
-
-
+
+
- ) : (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
- {
- this.setState({ ...this.state, input: change });
- this.generateNewCode(change);
- }}
- editorDidMount={() => {
- this.setState({
- loaded: { ...this.state.loaded, editorLoaded: true }
- });
- }}
- language="json"
- />
-
- {this.state.error ? (
-
- ) : (
-
-
-
- )}
-
-
-
- );
- }
-}
-export default withRouter(Playground);
\ No newline at end of file
+ }
+
+ );
+};
+
+export default withRouter(Playground);
diff --git a/modelina-website/src/components/playground/PlaygroundOptions.tsx b/modelina-website/src/components/playground/PlaygroundOptions.tsx
index 85ec5a1de3..7948f27aca 100644
--- a/modelina-website/src/components/playground/PlaygroundOptions.tsx
+++ b/modelina-website/src/components/playground/PlaygroundOptions.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { PlaygroundGeneralConfigContext } from '../contexts/PlaygroundConfigContext';
import TypeScriptGeneratorOptions from './options/TypeScriptGeneratorOptions';
import GeneralOptions from './options/GeneralOptions';
import JavaScriptGeneratorOptions from './options/JavaScriptGeneratorOptions';
@@ -11,79 +12,70 @@ import RustGeneratorOptions from './options/RustGeneratorOptions';
import PythonGeneratorOptions from './options/PythonGeneratorOptions';
import CplusplusGeneratorOptions from './options/CplusplusGeneratorOptions';
import PhpGeneratorOptions from './options/PhpGeneratorOptions';
-import { PlaygroundGeneralConfigContext } from '../contexts/PlaygroundConfigContext';
-interface WithRouterProps {
+interface PlaygroundOptionsProps {
setNewConfig?: (queryKey: string, queryValue: string) => void;
}
-interface PlaygroundOptionsState {}
-export const defaultState: PlaygroundOptionsState = {};
+const PlaygroundOptions: React.FC
= ({ setNewConfig }) => {
+ const context = useContext(PlaygroundGeneralConfigContext);
+ const [generatorOptions, setGeneratorOptions] = useState(null);
-class PlaygroundOptions extends React.Component<
- WithRouterProps,
- PlaygroundOptionsState
-> {
- static contextType = PlaygroundGeneralConfigContext;
- declare context: React.ContextType;
- constructor(props: any) {
- super(props);
- this.state = defaultState;
- }
-
- render() {
- let generatorOptions;
- if (this.context?.language === 'typescript') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'javascript') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'csharp') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'dart') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'go') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'cplusplus') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'java') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'kotlin') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'rust') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'python') {
- generatorOptions = (
-
- );
- } else if (this.context?.language === 'php') {
- generatorOptions = (
-
- );
+ const handleLanguageChange = () => {
+ switch (context?.language) {
+ case 'typescript':
+ setGeneratorOptions(prevOptions => );
+ break;
+ case 'javascript':
+ setGeneratorOptions();
+ break;
+ case 'csharp':
+ setGeneratorOptions();
+ break;
+ case 'dart':
+ setGeneratorOptions();
+ break;
+ case 'go':
+ setGeneratorOptions();
+ break;
+ case 'cplusplus':
+ setGeneratorOptions();
+ break;
+ case 'java':
+ setGeneratorOptions();
+ break;
+ case 'kotlin':
+ setGeneratorOptions();
+ break;
+ case 'rust':
+ setGeneratorOptions();
+ break;
+ case 'python':
+ setGeneratorOptions();
+ break;
+ case 'php':
+ setGeneratorOptions();
+ break;
+ default:
+ setGeneratorOptions(prevOptions => null);
+ break;
}
- return (
-
-
- {generatorOptions}
-
- );
}
-}
+
+ useEffect(() => {
+ handleLanguageChange();
+ }, [])
+
+ useEffect(() => {
+ handleLanguageChange();
+ }, [context?.language, setNewConfig]);
+
+ return (
+
+
+ {generatorOptions}
+
+ );
+};
+
export default PlaygroundOptions;
diff --git a/modelina-website/src/components/playground/Sidebar.tsx b/modelina-website/src/components/playground/Sidebar.tsx
new file mode 100644
index 0000000000..45e91a1424
--- /dev/null
+++ b/modelina-website/src/components/playground/Sidebar.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { IoOptionsOutline } from 'react-icons/io5';
+import { VscListSelection } from 'react-icons/vsc';
+import { Tooltip } from './Tooltip';
+import { usePlaygroundContext } from '../contexts/PlaygroundContext';
+
+interface SidebarItem {
+ name: string;
+ title: string;
+ isActive: boolean;
+ onClick: () => void;
+ icon: React.ReactNode;
+ tooltip: React.ReactNode;
+}
+
+interface SidebarProps {}
+
+export const Sidebar: React.FunctionComponent = () => {
+ const { setShowOptions, setShowOutputNavigation } = usePlaygroundContext();
+ const sidebarItems: SidebarItem[] = [
+ // Options
+ {
+ name: 'options',
+ title: 'Options',
+ isActive: false,
+ onClick: () => {
+ setShowOptions((prevShowOptions) => !prevShowOptions);
+ },
+ icon: ,
+ tooltip: 'Show or hide all the options'
+ },
+ // Output Explorer
+ {
+ name: 'outputExplorer',
+ title: 'Output',
+ isActive: false,
+ onClick: () => {
+ setShowOutputNavigation((prevShowOutputNavigation) => !prevShowOutputNavigation);
+ },
+ icon: ,
+ tooltip: 'Show or hide the list of output models'
+ }
+ ];
+
+ return (
+
+
+ {sidebarItems.map((item) => (
+
+
+
+ ))}
+
+
-
+
CSharp Specific options
-
-
+
-
In C#, a namespace is used to organize code into logical groups
@@ -109,20 +109,20 @@ class CSharpGeneratorOptions extends React.Component<
of your code.
-
- -
+
-
In C#, arrays are used to store collections of elements of the
@@ -138,7 +138,7 @@ class CSharpGeneratorOptions extends React.Component<
functionality and flexibility for working with collections.
-
- -
+
-
Auto-implemented properties in C# allow you to define properties
@@ -165,7 +165,7 @@ class CSharpGeneratorOptions extends React.Component<
boilerplate code you need to write.
-
- -
+
-
In C#, the GetHashCode() method is used to generate a hash code
@@ -190,7 +190,7 @@ class CSharpGeneratorOptions extends React.Component<
calculation based on the model's properties.
-
- -
+
-
The Equals() method in C# is used to compare two objects for
@@ -216,7 +216,7 @@ class CSharpGeneratorOptions extends React.Component<
comparisons.
-
- -
+
-
In C#, JSON serialization is the process of converting an object
@@ -240,7 +240,7 @@ class CSharpGeneratorOptions extends React.Component<
of the models.
-
- -
+
-
Newtonsoft.Json (Json.NET) is a popular third-party JSON
@@ -264,7 +264,7 @@ class CSharpGeneratorOptions extends React.Component<
using the Json.NET library.
-
- -
+
-
In C#, the nullable feature allows you to explicitly indicate
@@ -288,7 +288,7 @@ class CSharpGeneratorOptions extends React.Component<
flexibility when dealing with optional or unknown data values.
-