How to make work with code splitting/async loading? about monaco-sql-languages HOT 7 CLOSED

The language of monaco-sql-languages is registered in exactly the same way as the monaco built-in languages. And the Monaco built-in language is also loaded globally. We want to be consistent with monaco-editor in this regard.

The loading of the language files depends on how you integrate monaco-sql-languages. If you use monacoEditorWebpackPlugin to integrate monaco-sql-languages, the language files provided by monaco-sql-languages will be loaded at the same time as monaco-editor. If you use other methods of integration, then the loading of the language files depends on when youimport the language's contribution files.

But in fact, the language registration happens when you use the language for the first time. For detail see onLanguage Api.

As for the loading of metadata, I personally think it should be decoupled from the registration of the language.

from monaco-sql-languages.

It seems the setup happens in an odd way, which makes it hard to work when we need to rely on state to load the completionService (load table, catalog metadata).

Hi, @Samrose-Ahmed .
Pls are you still concerned about this issue. I seem to have misunderstood your question before. I recently encountered a similar problem, can you describe the problem you are experiencing in more detail ? (e.g. exception information).

from monaco-sql-languages.

Yes, its not exactly an exception, its more about functionality. I.e. because the initialization requires loading external metadata (which I agree 'should be decoupled from the registration of the language'), there should be some hook to update or set the language settings, that we can programatically call, e.g. when metadata is done loading, or say when metadata changes (imagine different catalogs, etc).

from monaco-sql-languages.

There may have been some misunderstandings in our previous conversations. Because I might be discussing two issues with you.
I still don't understand why you need monaco-sql-languages to provide a hook. I don't know what you're referring to by updating language settings. If you just want to update completionService. You can call setLanguagesFeatrures anywhere.

Code example:
completionService.ts

class MetaProvider {
	private _catalogs = [];
	private _databases = [];
	private _tables = [];

	fetchCatalog() {
		// ...
		this._catalogs = [some catalogs..]
	}
	fetchDatabase() {
		// ...
		this._databases = [some databases]
	}
	fetchTables() {
		// ...
		this._tables = [some tables]
	}
	get catalogs() {
		return this.catalogs
	}

	get databases() {
		return this._databases
	}

	get Tables() {
		return this._tables
	}
}

export const metaProvider = new MetaProvider();

export const completionService: CompletionService = async function (
	model,
	_position,
	_completionContext,
	suggestions
) {
	if (!suggestions) {
		return Promise.resolve([]);
	}
	const { keywords, syntax } = suggestions;

	const keywordsCompletionItems: ICompletionItem[] = keywords.map((kw) => ({
		label: kw,
		kind: languages.CompletionItemKind.Keyword,
		detail: 'keyword',
		sortText: '2' + kw,
	}));

	let syntaxCompletionItems: ICompletionItem[] = [];

	for (let i = 0; i < syntax.length; i++) {
		const { syntaxContextType, wordRanges } = syntax[i];
		const words = wordRanges.map((wr) => wr.text);

		if(syntaxContextType === SyntaxContextType.CATALOG) {
			syntaxCompletionItems =[
			    ...syntaxCompletionItems, 
                            // Generated completionItems from metadata
                             ...metaProvider.catalogs.map(cat => ({...}))
                         ] 
		}
	}
	return [...syntaxCompletionItems, ...keywordsCompletionItems];
};

app.tsx

import React, { useEffect } from 'react';
import { setupLanguageFeatures, LanguageIdEnum } from 'monaco-sql-languages';
import { metaProvider, completionService } from './completionService'

setupLanguageFeatures({
	languageId: LanguageIdEnum.TRINO,
	completionService
});

function App () {
	useEffect(() => {
		// invoke meta fetching anyWhere
		metaProvider.fetchCatalog();
		metaProvider.fetchDatabase();
		metaProvider.fetchTables();
	}, [])

	return(
		<MonacoEditor language={LanguageIdEnum.TRINO}/>
	)
}

In the example above, you only need to set completionService up once, Updates to the metadata are left to metaProvider.

from monaco-sql-languages.

But that's not how it works in reality in frontend/React code, the completion service won't be a stateless class/function but rather a hook to avoid re fetching again and again.

from monaco-sql-languages.

The completionService itself is stateless, it only cares about the input(from editor and sql-parser) and output completionItems. The state you mentioned should be referring to metadata.

In my vision, completionService should indeed be a pure function. As for metadata, I think it's state, and the fetching of metadata I think is a side effect. But these states and side effects are external to moanco-sql-languages, and monaco-sql-languages shouldn't care about those. These states and side effects must need to be dealt with somewhere, but I don't think the place should be inside monaco-sql-languages.

Additionally, we cannot make it work exactly like a React Hook because the monaco-editor API are not stateless function.The style of the monaco-sql-languages API will remain the same as that of moanco-editor.

So you may need to wrap a hook yourself to handle the additional state and side effects.
For example

function useMetaData (deps) {
    const [ metaData, updateMetadata ] = useState(null);
    useEffect(() => {
       // fetch metaData
    }, deps)
    
    return [metaData]
}

function useCompletionService (metaData) {    
    const completionService = useCallback(() => {
         // .....
    }, metaData)
    
    useEffect(() => {
      setupLanguageFeatures({
        completionService
      })
    },[completionService])
}

This demo might look a bit ugly, but we have to do it somewhere.

from monaco-sql-languages.