diff --git a/apps/studio/.gitignore b/apps/studio/.gitignore index db15c18a7..9416583b4 100644 --- a/apps/studio/.gitignore +++ b/apps/studio/.gitignore @@ -2,4 +2,5 @@ /node_modules .vscode/ /lib -/build \ No newline at end of file +/build +.next \ No newline at end of file diff --git a/apps/studio/src/main.css b/apps/studio/app/globals.css similarity index 97% rename from apps/studio/src/main.css rename to apps/studio/app/globals.css index 9dd4ac4f0..eabc4aed4 100644 --- a/apps/studio/src/main.css +++ b/apps/studio/app/globals.css @@ -1,3 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + + /** Preloader */ #preloader { position: fixed; diff --git a/apps/studio/app/layout.tsx b/apps/studio/app/layout.tsx new file mode 100644 index 000000000..1dd897a67 --- /dev/null +++ b/apps/studio/app/layout.tsx @@ -0,0 +1,62 @@ +import React from 'react' +import Head from 'next/head' +import 'reactflow/dist/style.css'; +import './globals.css' +import 'tippy.js/dist/tippy.css'; +import 'tippy.js/animations/shift-away.css'; +import '@asyncapi/react-component/styles/default.min.css'; +import { Metadata } from 'next'; + +const title = 'AsyncAPI Studio' +const description = 'Studio for AsyncAPI specification, where you can validate, view preview documentation, and generate templates from AsyncAPI document.' +export const metadata: Metadata = { + title, + description, + openGraph: { + type: 'website', + url: 'https://studio.asyncapi.com/', + title, + description, + images: [ + { + url: '/img/meta-studio-og-image.jpeg', + width: 800, + height: 600, + alt: 'Og Image Alt', + } + ], + }, + twitter: { + card: 'summary_large_image', + site: '@AsyncAPISpec', + creator: '@AsyncAPISpec', + title, + description, + images: [ + { + url: '/img/meta-studio-og-image.jpeg', + alt: 'Twitter Image Alt', + width: 800, + height: 600, + type: 'image/jpeg', + } + ] + }, +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + + + + + {children} + + ) +} \ No newline at end of file diff --git a/apps/studio/app/page.tsx b/apps/studio/app/page.tsx new file mode 100644 index 000000000..426563adb --- /dev/null +++ b/apps/studio/app/page.tsx @@ -0,0 +1,58 @@ + +'use client' + +import React, { useEffect, useState } from 'react'; +import { StrictMode } from 'react'; +import { Provider as ModalsProvider } from '@ebay/nice-modal-react'; +import { createServices, Services, ServicesProvider } from '../src/services'; +import { App} from '../src/App'; + +function configureMonacoEnvironment() { + if (typeof window !== 'undefined') { + window.MonacoEnvironment = { + getWorker(_, label) { + switch (label) { + case 'editorWorkerService': + return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)); + case 'json': + return new Worker( + new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url), + ); + case 'yaml': + case 'yml': + return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url)); + default: + throw new Error(`Unknown worker ${label}`); + } + }, + }; + } +} + +function Page() { + const [services, setServices] = useState(); + useEffect(() => { + const fetchData = async () => { + const servicess = await createServices(); + setServices(servicess) + configureMonacoEnvironment(); + }; + + fetchData(); + }, []); + + if (!services) { + return

Loading....

; + } + return ( + + + + + + + + ); +} + +export default Page; diff --git a/apps/studio/next-env.d.ts b/apps/studio/next-env.d.ts new file mode 100644 index 000000000..4f11a03dc --- /dev/null +++ b/apps/studio/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/apps/studio/next.config.mjs b/apps/studio/next.config.mjs new file mode 100644 index 000000000..bbe0139e7 --- /dev/null +++ b/apps/studio/next.config.mjs @@ -0,0 +1,11 @@ +import withYaml from 'next-plugin-yaml'; +export default withYaml( + { + webpack: config => { + config.resolve.fallback = { + fs: false + } + return config; + }, + } +); \ No newline at end of file diff --git a/apps/studio/package.json b/apps/studio/package.json index ce7984447..5787fe835 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -33,13 +33,16 @@ "@ebay/nice-modal-react": "^1.2.10", "@headlessui/react": "^1.7.4", "@hookstate/core": "^4.0.0-rc21", - "@monaco-editor/react": "^4.4.6", + "@monaco-editor/react": "^4.6.0", "@tippyjs/react": "^4.2.6", "js-base64": "^3.7.3", "js-file-download": "^0.4.12", "js-yaml": "^4.1.0", - "monaco-editor": "0.34.1", + "monaco-editor": "0.45.0", "monaco-yaml": "4.0.2", + "next": "^14.0.4", + "next-plugin-yaml": "^1.0.1", + "next-transpile-modules": "^10.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hot-toast": "2.4.0", @@ -48,9 +51,9 @@ "zustand": "^4.1.4" }, "scripts": { - "dev": "npm run start", - "start": "craco start", - "build": "npm run generate:template-parameters && craco build", + "dev": "next dev", + "start": "next start", + "build": "npm run generate:template-parameters && next build", "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf build", "test": "npm run test:unit", "test:unit": "craco test --watchAll=false --detectOpenHandles", @@ -98,7 +101,7 @@ "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", "assert": "^2.0.0", - "autoprefixer": "^10.4.13", + "autoprefixer": "^10.4.16", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", "conventional-changelog-conventionalcommits": "^5.0.0", @@ -111,13 +114,12 @@ "https-browserify": "^1.0.0", "markdown-toc": "^1.2.0", "path-browserify": "^1.0.1", - "postcss": "^8.4.31", + "postcss": "^8.4.32", "process": "^0.11.10", "raw-loader": "^4.0.2", - "react-scripts": "5.0.1", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", - "tailwindcss": "^3.2.4", + "tailwindcss": "^3.3.6", "ts-node": "^10.9.1", "typescript": "^4.9.3", "url": "^0.11.0", @@ -137,4 +139,4 @@ "publishConfig": { "access": "public" } -} +} \ No newline at end of file diff --git a/apps/studio/postcss.config.js b/apps/studio/postcss.config.js new file mode 100644 index 000000000..33ad091d2 --- /dev/null +++ b/apps/studio/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/apps/studio/src/App.tsx b/apps/studio/src/App.tsx index bfb54b021..cfb8d6978 100644 --- a/apps/studio/src/App.tsx +++ b/apps/studio/src/App.tsx @@ -1,3 +1,4 @@ + import { AsyncAPIStudio } from './studio'; import type { FunctionComponent } from 'react'; diff --git a/apps/studio/src/components/Editor/MonacoWrapper.tsx b/apps/studio/src/components/Editor/MonacoWrapper.tsx index b34ea1116..3bec52f8d 100644 --- a/apps/studio/src/components/Editor/MonacoWrapper.tsx +++ b/apps/studio/src/components/Editor/MonacoWrapper.tsx @@ -1,20 +1,20 @@ import { useMemo } from 'react'; -import MonacoEditor from '@monaco-editor/react'; - +import dynamic from 'next/dynamic'; import { debounce } from '../../helpers'; import { useServices } from '../../services'; import { useFilesState, useSettingsState } from '../../state'; import type { FunctionComponent } from 'react'; import type { EditorProps as MonacoEditorProps } from '@monaco-editor/react'; - +const DynamicMonaco = dynamic(() => import('@monaco-editor/react'), { + ssr: false, +}); export const MonacoWrapper: FunctionComponent = ({ ...props }) => { const { editorSvc, parserSvc } = useServices(); const { autoSaving, savingDelay } = useSettingsState(state => state.editor); const file = useFilesState(state => state.files['asyncapi']); - const onChange = useMemo(() => { return debounce((v: string) => { editorSvc.updateState({ content: v, file: { from: 'storage', source: undefined } }); @@ -24,11 +24,27 @@ export const MonacoWrapper: FunctionComponent = ({ }, [autoSaving, savingDelay]); return ( - { + if (!window?.MonacoEnvironment) return + editorSvc.onDidCreate.bind(editorSvc)(arg) + window.MonacoEnvironment.getWorkerUrl = (moduleId, label) => { + switch (label) { + case 'editorWorkerService': + return '_next/static/editor.worker.js'; + case 'json': + return '_next/static/json.worker.js'; + case 'yaml': + case 'yml': + return '_next/monaco-yaml/yaml.worker.js'; + default: + throw new Error(`Unknown worker ${label}`); + } + } + }} onChange={onChange} options={{ wordWrap: 'on', diff --git a/apps/studio/src/components/Editor/ShareButton.tsx b/apps/studio/src/components/Editor/ShareButton.tsx index 96f4b9481..a597bc69d 100644 --- a/apps/studio/src/components/Editor/ShareButton.tsx +++ b/apps/studio/src/components/Editor/ShareButton.tsx @@ -8,7 +8,12 @@ interface ShareButtonProps {} export const ShareButton: React.FunctionComponent = () => { const { editorSvc } = useServices(); + const [navigator, setNavigator] = React.useState(null); + React.useEffect(() => { + setNavigator(window.navigator); + }, []); + const handleShare = () => { toast.promise( (async function () { diff --git a/apps/studio/src/components/Navigation.tsx b/apps/studio/src/components/Navigation.tsx index 4a94a1822..0d6ee0485 100644 --- a/apps/studio/src/components/Navigation.tsx +++ b/apps/studio/src/components/Navigation.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'; import { useServices } from '../services'; import { useDocumentsState, useFilesState } from '../state'; -import type { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs'; +import type { AsyncAPIDocumentInterface } from '@asyncapi/parser'; interface NavigationProps { className?: string; diff --git a/apps/studio/src/components/Navigationv3.tsx b/apps/studio/src/components/Navigationv3.tsx index 56d28aaff..b6be02710 100644 --- a/apps/studio/src/components/Navigationv3.tsx +++ b/apps/studio/src/components/Navigationv3.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'; import { useServices } from '../services'; import { useDocumentsState, useFilesState } from '../state'; -import type { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs'; +import type { AsyncAPIDocumentInterface } from '@asyncapi/parser'; interface NavigationProps { className?: string; diff --git a/apps/studio/src/components/SplitPane/Resizer.tsx b/apps/studio/src/components/SplitPane/Resizer.tsx index 3a4f766aa..48acf942b 100644 --- a/apps/studio/src/components/SplitPane/Resizer.tsx +++ b/apps/studio/src/components/SplitPane/Resizer.tsx @@ -1,9 +1,9 @@ /* eslint-disable */ -// @ts-nocheck + export const RESIZER_DEFAULT_CLASSNAME = 'Resizer'; -function Resizer(props) { +function Resizer(props: any) { const { className, onClick, @@ -11,7 +11,7 @@ function Resizer(props) { onMouseDown, onTouchEnd, onTouchStart, - resizerClassName, + resizerClassName = RESIZER_DEFAULT_CLASSNAME, split, style, } = props; @@ -47,8 +47,4 @@ function Resizer(props) { ); } -Resizer.defaultProps = { - resizerClassName: RESIZER_DEFAULT_CLASSNAME, -}; - export default Resizer; \ No newline at end of file diff --git a/apps/studio/src/components/Template/HTMLWrapper.tsx b/apps/studio/src/components/Template/HTMLWrapper.tsx index 8bff5431a..7549eb0ce 100644 --- a/apps/studio/src/components/Template/HTMLWrapper.tsx +++ b/apps/studio/src/components/Template/HTMLWrapper.tsx @@ -4,7 +4,7 @@ import { AsyncApiComponentWP } from '@asyncapi/react-component'; import { useServices } from '../../services'; import { appState, useDocumentsState, useSettingsState, useOtherState, otherState } from '../../state'; -import { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs'; +import { AsyncAPIDocumentInterface } from '@asyncapi/parser'; interface HTMLWrapperProps {} diff --git a/apps/studio/src/components/Terminal/ProblemsTab.tsx b/apps/studio/src/components/Terminal/ProblemsTab.tsx index 9368cb840..118cfd915 100644 --- a/apps/studio/src/components/Terminal/ProblemsTab.tsx +++ b/apps/studio/src/components/Terminal/ProblemsTab.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; import { VscError, VscWarning, VscInfo, VscLightbulb, VscSearch, VscClose, VscSettingsGear } from 'react-icons/vsc'; import { useModal } from '@ebay/nice-modal-react'; -import { DiagnosticSeverity } from '@asyncapi/parser/cjs'; +import { DiagnosticSeverity } from '@asyncapi/parser'; import { SettingsModal } from '../Modals/Settings/SettingsModal'; @@ -11,7 +11,7 @@ import { debounce } from '../../helpers'; import { useDocumentsState, useSettingsState } from '../../state'; import type { FunctionComponent } from 'react'; -import type { Diagnostic } from '@asyncapi/parser/cjs'; +import type { Diagnostic } from '@asyncapi/parser'; interface ProblemsTabProps {} diff --git a/apps/studio/src/components/Visualiser/FlowDiagram.tsx b/apps/studio/src/components/Visualiser/FlowDiagram.tsx index 28b214cef..ca4d59a48 100644 --- a/apps/studio/src/components/Visualiser/FlowDiagram.tsx +++ b/apps/studio/src/components/Visualiser/FlowDiagram.tsx @@ -6,7 +6,7 @@ import { Controls } from './Controls'; import { getElementsFromAsyncAPISpec } from './utils/node-factory'; import { calculateNodesForDynamicLayout } from './utils/node-calculator'; -import type { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser/cjs'; +import type { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser'; import type { FunctionComponent } from 'react'; interface FlowDiagramProps { diff --git a/apps/studio/src/components/Visualiser/Nodes/ApplicationNode.tsx b/apps/studio/src/components/Visualiser/Nodes/ApplicationNode.tsx index d6a380564..c439d107c 100644 --- a/apps/studio/src/components/Visualiser/Nodes/ApplicationNode.tsx +++ b/apps/studio/src/components/Visualiser/Nodes/ApplicationNode.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { Handle, Position } from 'reactflow'; -import { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser/cjs'; +import { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser'; import { useServices } from '../../../services'; import { Markdown } from '../../common'; diff --git a/apps/studio/src/components/Visualiser/Visualiser.tsx b/apps/studio/src/components/Visualiser/Visualiser.tsx index 357d2c632..c2e33f2af 100644 --- a/apps/studio/src/components/Visualiser/Visualiser.tsx +++ b/apps/studio/src/components/Visualiser/Visualiser.tsx @@ -4,7 +4,7 @@ import { FlowDiagram } from './FlowDiagram'; import { useDocumentsState, useSettingsState, useOtherState, otherState } from '../../state'; -import { OldAsyncAPIDocument as AsyncAPIDocument, convertToOldAPI } from '@asyncapi/parser/cjs'; +import { OldAsyncAPIDocument as AsyncAPIDocument, convertToOldAPI } from '@asyncapi/parser'; import type { FunctionComponent } from 'react'; interface VisualiserProps {} diff --git a/apps/studio/src/components/Visualiser/utils/node-factory.ts b/apps/studio/src/components/Visualiser/utils/node-factory.ts index 68de1f322..61bdda753 100644 --- a/apps/studio/src/components/Visualiser/utils/node-factory.ts +++ b/apps/studio/src/components/Visualiser/utils/node-factory.ts @@ -1,4 +1,4 @@ -import type { OldAsyncAPIDocument as AsyncAPIDocument, OldChannel, OldOperation, OldMessage } from '@asyncapi/parser/cjs'; +import type { OldAsyncAPIDocument as AsyncAPIDocument, OldChannel, OldOperation, OldMessage } from '@asyncapi/parser'; import type { Node, Edge } from 'reactflow'; interface FileredChannel { @@ -87,8 +87,8 @@ export function getElementsFromAsyncAPISpec(spec: AsyncAPIDocument): Array<{ nod }; return [ - ...publishNodes, - { node: applicationNode } as { node: Node, edge: Edge }, + ...publishNodes, + { node: applicationNode } as { node: Node, edge: Edge }, ...subscribeNodes ]; } diff --git a/apps/studio/src/postcss.config.js b/apps/studio/src/postcss.config.js new file mode 100644 index 000000000..cabc4932c --- /dev/null +++ b/apps/studio/src/postcss.config.js @@ -0,0 +1,10 @@ +const purgecss = [ + '@fullhuman/postcss-purgecss', + { + // https://purgecss.com/configuration.html#options + content: ['./src/**/*.tsx', './app/**/*.tsx'], + css: [], + whitelistPatternsChildren: [/monaco-editor/], // so it handles .monaco-editor .foo .bar + defaultExtractor: content => content.match(/[\w-/.:]+(? import type * as monacoAPI from 'monaco-editor/esm/vs/editor/editor.api'; -import type { AsyncAPIDocumentInterface, ParseOutput } from '@asyncapi/parser/cjs'; +import type { AsyncAPIDocumentInterface, ParseOutput } from '@asyncapi/parser'; declare global { interface Window { diff --git a/apps/studio/src/services/editor.service.tsx b/apps/studio/src/services/editor.service.tsx index 630ef33bf..35248ed5e 100644 --- a/apps/studio/src/services/editor.service.tsx +++ b/apps/studio/src/services/editor.service.tsx @@ -1,14 +1,11 @@ import { AbstractService } from './abstract.service'; - -import { KeyMod, KeyCode } from 'monaco-editor/esm/vs/editor/editor.api'; import { DiagnosticSeverity } from '@asyncapi/parser/cjs'; -import { Range, MarkerSeverity } from 'monaco-editor/esm/vs/editor/editor.api'; import toast from 'react-hot-toast'; import fileDownload from 'js-file-download'; import { appState, documentsState, filesState, settingsState } from '../state'; -import type * as monacoAPI from 'monaco-editor/esm/vs/editor/editor.api'; +//import * as monacoAPI from 'monaco-editor/esm/vs/editor/editor.api'; import type { Diagnostic } from '@asyncapi/parser/cjs'; import type { ConvertVersion } from '@asyncapi/converter'; import type { File } from '../state/files.state'; @@ -23,18 +20,20 @@ export interface UpdateState { export class EditorService extends AbstractService { private created = false; private decorations: Map = new Map(); - private instance: monacoAPI.editor.IStandaloneCodeEditor | undefined; + private instance: any; + private monacoAPI: any; override onInit() { this.subcribeToDocuments(); } - async onDidCreate(editor: monacoAPI.editor.IStandaloneCodeEditor) { + async onDidCreate(editor: any) { if (this.created) { return; } this.created = true; this.instance = editor; + this.monacoAPI = await import('monaco-editor/esm/vs/editor/editor.api') // parse on first run - only when document is undefined const document = documentsState.getState().documents.asyncapi; @@ -46,14 +45,14 @@ export class EditorService extends AbstractService { // apply save command editor.addCommand( - KeyMod.CtrlCmd | KeyCode.KeyS, + this.monacoAPI.KeyMod.CtrlCmd | this.monacoAPI.KeyCode.KeyS, () => this.saveToLocalStorage(), ); appState.setState({ initialized: true }); } - get editor(): monacoAPI.editor.IStandaloneCodeEditor | undefined { + get editor(): any { return this.instance; } @@ -289,8 +288,8 @@ export class EditorService extends AbstractService { } createMarkersAndDecorations(diagnostics: Diagnostic[] = []) { - const newDecorations: monacoAPI.editor.IModelDecoration[] = []; - const newMarkers: monacoAPI.editor.IMarkerData[] = []; + const newDecorations: any = []; + const newMarkers: any = []; diagnostics.forEach(diagnostic => { const { message, range, severity } = diagnostic; @@ -299,7 +298,7 @@ export class EditorService extends AbstractService { newDecorations.push({ id: 'asyncapi', ownerId: 0, - range: new Range( + range: new this.monacoAPI.Range( range.start.line + 1, range.start.character + 1, range.end.line + 1, @@ -326,7 +325,8 @@ export class EditorService extends AbstractService { return { decorations: newDecorations, markers: newMarkers }; } - private getSeverity(severity: DiagnosticSeverity): monacoAPI.MarkerSeverity { + private getSeverity(severity: DiagnosticSeverity): any { + const { MarkerSeverity } = this.monacoAPI switch (severity) { case DiagnosticSeverity.Error: return MarkerSeverity.Error; case DiagnosticSeverity.Warning: return MarkerSeverity.Warning; diff --git a/apps/studio/src/services/monaco.service.ts b/apps/studio/src/services/monaco.service.ts index b83536fdf..7d4a63202 100644 --- a/apps/studio/src/services/monaco.service.ts +++ b/apps/studio/src/services/monaco.service.ts @@ -1,21 +1,15 @@ import { AbstractService } from './abstract.service'; - -import { loader } from '@monaco-editor/react'; -import { setDiagnosticsOptions } from 'monaco-yaml'; import YAML from 'js-yaml'; import { documentsState, filesState } from '../state'; - -import type * as monacoAPI from 'monaco-editor/esm/vs/editor/editor.api'; -import type { DiagnosticsOptions as YAMLDiagnosticsOptions } from 'monaco-yaml'; import type { SpecVersions } from '../types'; import type { JSONSchema7 } from 'json-schema'; export class MonacoService extends AbstractService { private jsonSchemaSpecs: Map = new Map(); - private jsonSchemaDefinitions: monacoAPI.languages.json.DiagnosticsOptions['schemas'] = []; + private jsonSchemaDefinitions: any = []; private actualVersion = 'X.X.X'; - private monacoInstance!: typeof monacoAPI; + private monacoInstance!: any; override async onInit() { // load monaco instance @@ -25,7 +19,7 @@ export class MonacoService extends AbstractService { // prepare JSON Schema specs and definitions for JSON/YAML language config this.prepareJSONSchemas(); // load initial language config (for json and yaml) - this.setLanguageConfig(this.svcs.specificationSvc.latestVersion); + await this.setLanguageConfig(this.svcs.specificationSvc.latestVersion); // subscribe to document to update JSON/YAML language config this.subcribeToDocuments(); } @@ -42,7 +36,7 @@ export class MonacoService extends AbstractService { this.actualVersion = version; } - private setLanguageConfig(version: SpecVersions = this.svcs.specificationSvc.latestVersion) { + private async setLanguageConfig(version: SpecVersions = this.svcs.specificationSvc.latestVersion) { if (!this.monaco) { return; } @@ -55,12 +49,13 @@ export class MonacoService extends AbstractService { } // yaml - setDiagnosticsOptions(options as YAMLDiagnosticsOptions); + const { setDiagnosticsOptions } = await import('monaco-yaml'); + setDiagnosticsOptions(options as any); } private prepareLanguageConfig( version: SpecVersions, - ): monacoAPI.languages.json.DiagnosticsOptions { + ): any { const spec = this.jsonSchemaSpecs.get(version); return { @@ -85,8 +80,9 @@ export class MonacoService extends AbstractService { if (process.env.NODE_ENV === 'test') { return; } - + const monaco = this.monacoInstance = await import('monaco-editor'); + const { loader } = await import('@monaco-editor/react'); loader.config({ monaco }); } @@ -124,7 +120,7 @@ export class MonacoService extends AbstractService { } return { - uri, + uri, schema, }; }); diff --git a/apps/studio/src/services/parser.service.ts b/apps/studio/src/services/parser.service.ts index 3797d48ca..939890c13 100644 --- a/apps/studio/src/services/parser.service.ts +++ b/apps/studio/src/services/parser.service.ts @@ -1,6 +1,6 @@ import { AbstractService } from './abstract.service'; -import { Parser, DiagnosticSeverity } from '@asyncapi/parser/cjs'; +import { Parser, DiagnosticSeverity } from '@asyncapi/parser'; import { OpenAPISchemaParser } from '@asyncapi/openapi-schema-parser'; import { AvroSchemaParser } from '@asyncapi/avro-schema-parser'; import { ProtoBuffSchemaParser } from '@asyncapi/protobuf-schema-parser'; @@ -9,7 +9,7 @@ import { untilde } from '@asyncapi/parser/cjs/utils'; import { isDeepEqual } from '../helpers'; import { filesState, documentsState, settingsState } from '../state'; -import type { Diagnostic, ParseOptions } from '@asyncapi/parser/cjs'; +import type { Diagnostic, ParseOptions } from '@asyncapi/parser'; import type { DocumentDiagnostics } from '../state/documents.state'; import { SchemaParser } from '@asyncapi/parser'; @@ -54,7 +54,7 @@ export class ParserService extends AbstractService { valid: true, }); return; - } + } } catch (err: unknown) { console.log(err); } @@ -107,7 +107,7 @@ export class ParserService extends AbstractService { diagnostic.message = 'File references are not yet supported in Studio'; } }); - + const collections: DocumentDiagnostics = { original: diagnostics, filtered: [], diff --git a/apps/studio/src/services/tests/editor.service.test.ts b/apps/studio/src/services/tests/editor.service.test.ts index 808b62e0f..8087df34c 100644 --- a/apps/studio/src/services/tests/editor.service.test.ts +++ b/apps/studio/src/services/tests/editor.service.test.ts @@ -1,10 +1,10 @@ import * as monacoAPI from 'monaco-editor/esm/vs/editor/editor.api'; -import { DiagnosticSeverity } from '@asyncapi/parser/cjs'; +import { DiagnosticSeverity } from '@asyncapi/parser'; import { createServices } from '../'; import type { EditorService } from '../editor.service'; -import type { Diagnostic } from '@asyncapi/parser/cjs'; +import type { Diagnostic } from '@asyncapi/parser'; describe('EditorService', () => { let editorSvc: EditorService; @@ -140,7 +140,7 @@ describe('EditorService', () => { range: new monacoAPI.Range(1, 2, 2, 3), }); }); - + test('should not create markers and decorators without errors', () => { const errors: any[] = []; diff --git a/apps/studio/src/state/app.state.ts b/apps/studio/src/state/app.state.ts index 40af06b1b..8a32f06b3 100644 --- a/apps/studio/src/state/app.state.ts +++ b/apps/studio/src/state/app.state.ts @@ -1,4 +1,4 @@ -import create from 'zustand'; +import { create } from 'zustand'; export type AppState = { initialized: boolean; diff --git a/apps/studio/src/state/documents.state.ts b/apps/studio/src/state/documents.state.ts index 276e89b16..d32a3bf2d 100644 --- a/apps/studio/src/state/documents.state.ts +++ b/apps/studio/src/state/documents.state.ts @@ -1,6 +1,6 @@ -import create from 'zustand'; +import { create } from 'zustand'; -import type { AsyncAPIDocumentInterface, Diagnostic, ParseOutput } from '@asyncapi/parser/cjs'; +import type { AsyncAPIDocumentInterface, Diagnostic, ParseOutput } from '@asyncapi/parser'; export type DocumentDiagnostics = { original: Diagnostic[]; @@ -20,7 +20,7 @@ export type Document = { } export type DocumentsState = { - documents: Record; + documents: Record; } export type DocumentsActions = { diff --git a/apps/studio/src/state/files.state.ts b/apps/studio/src/state/files.state.ts index cc9ce82dd..79636cbdc 100644 --- a/apps/studio/src/state/files.state.ts +++ b/apps/studio/src/state/files.state.ts @@ -1,7 +1,7 @@ -import create from 'zustand'; +import { create } from 'zustand'; const schema = - localStorage.getItem('document') || `asyncapi: 3.0.0 + typeof window !== 'undefined' ? localStorage.getItem('document') : `asyncapi: 3.0.0 info: title: Streetlights Kafka API version: 1.0.0 diff --git a/apps/studio/src/state/other.state.ts b/apps/studio/src/state/other.state.ts index df035d406..c07d17c6c 100644 --- a/apps/studio/src/state/other.state.ts +++ b/apps/studio/src/state/other.state.ts @@ -1,4 +1,4 @@ -import create from 'zustand'; +import { create } from 'zustand'; export type OtherState = { editorHeight: string; diff --git a/apps/studio/src/state/panels.state.ts b/apps/studio/src/state/panels.state.ts index 0294635cf..d76f451e7 100644 --- a/apps/studio/src/state/panels.state.ts +++ b/apps/studio/src/state/panels.state.ts @@ -1,4 +1,4 @@ -import create from 'zustand'; +import { create } from 'zustand'; import { persist } from 'zustand/middleware'; export type PanelsState = { @@ -16,23 +16,23 @@ export type PanelsState = { } export const panelsState = create( - persist(() => - ({ - show: { - activityBar: true, - statusBar: true, - primarySidebar: true, - secondarySidebar: true, - primaryPanel: true, - secondaryPanel: true, - contextPanel: true, - }, - secondaryPanelType: 'template', - }), - { - name: 'studio-panels', - getStorage: () => localStorage, - } + persist(() => + ({ + show: { + activityBar: true, + statusBar: true, + primarySidebar: true, + secondarySidebar: true, + primaryPanel: true, + secondaryPanel: true, + contextPanel: true, + }, + secondaryPanelType: 'template', + }), + { + name: 'studio-panels', + getStorage: () => localStorage, + } ), ); diff --git a/apps/studio/src/state/settings.state.ts b/apps/studio/src/state/settings.state.ts index 1b4fbd10b..e4aa13a17 100644 --- a/apps/studio/src/state/settings.state.ts +++ b/apps/studio/src/state/settings.state.ts @@ -19,7 +19,7 @@ export type SettingsState = { } export const settingsState = create( - persist(() => + persist(() => ({ editor: { autoSaving: true, @@ -35,7 +35,7 @@ export const settingsState = create( templates: { autoRendering: true, }, - }), + }), { name: 'studio-settings', getStorage: () => localStorage, diff --git a/apps/studio/src/studio.tsx b/apps/studio/src/studio.tsx index ba60207fc..23f4ea347 100644 --- a/apps/studio/src/studio.tsx +++ b/apps/studio/src/studio.tsx @@ -21,7 +21,7 @@ export const AsyncAPIStudio: React.FunctionComponent< if (appState.getState().readOnly) { return ( -
+