ACE editor - allow custom modes and themes in Angular/TypeScript - sql

Introduction:
I've an Angular application where custom SQL statements can be written by using the ACE editor (https://ace.c9.io/). Even though there are modes and themes for SQL, I wanted to create a custom mode and a custom theme for my requirements.
Setup:
I followed this tutorial: https://blog.shhdharmen.me/how-to-setup-ace-editor-in-angular
ng new ace-app (Angular 13.3.2)
npm install ace-builds (ACE-Builds 1.4.14)
component.ts
import * as ace from 'ace-builds';
...
public aceEditor: ace.Ace.Editor;
#ViewChild('editor') private editor!: ElementRef<HTMLElement>;
...
ngAfterViewInit(): void {
// I don't understand why we don't set the "basePath" to our installed package
ace.config.set('basePath', 'https://unpkg.com/ace-builds#1.4.12/src-noconflict');
this.aceEditor = ace.edit(this.editor.nativeElement);
if (this.aceEditor) {
this.aceEditor.setOptions({
mode: 'ace/mode/sql',
theme: 'ace/theme/sqlserver',
});
}
component.html
<div #editor></div>
Result:
The editor is working, but now I need to somehow add a custom mode and theme.
Problems and Questions:
Is it correct to set the basePath to an external URL if I've the package already installed (obsolete due to Edit 1)?
How and where would I add the custom mode.js and theme.js?
How can I direct ace to the custom mode.js and theme.js?
Edit 1:
I managed to get rid of this line of code:
ace.config.set('basePath', 'https://unpkg.com/ace-builds#1.4.12/src-noconflict');
by directly importing the theme and mode with:
import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-sqlserver';
the rest of the code did not have to be changed.

After looking through several projects and issues, I figured out that the best way to implement custom themes and modes for the ACE editor is to copy existing ones from ./node-modules/ace-builds/src-conflict and paste them to ./src/assets/ace.
Example:
Copy an existing mode (and optionally the theme) that represents your required syntax highlighting the most, in my case it was mode-sql.js. I copied the files to ./src/assets/ace and changed the import in my component.ts from:
import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-sqlserver';
To:
import '../../../../assets/ace/mode-sql.js';
import '../../../../assets/ace/theme-sqlserver.js';
Everything else was kept exactly as described in the initial question. From there you can start to change the name of mode and theme, update the rules as well as the styling according to your requirements.

Related

UserActions logic is moved to #spartacus/user

Based on this upgrade suggestion I’m trying to import UserActions/UserDetailsAction from #spartacus/user lib but am getting the error has no exported member.
// TODO:Spartacus - UserActions - Following actions 'ForgotPasswordEmailRequestAction', 'ResetPasswordAction', 'EmailActions', 'UpdatePasswordAction', 'UserDetailsAction' were removed. Logic was moved to '#spartacus/user'
Module ‘“#spartacus/user”’ has no exported member ‘UserActions’.
import { UserActions } from '#spartacus/user';
this.store.dispatch(new UserActions.LoadUserDetails(user));
import { UserActions } from '#spartacus/user';
Tried to import UserActions from the user lib
According to the technical changes documentation, you should use the new recommended approach with commands and queries as mentioned in the link. But you can also try importing from #spartacus/user/account, #spartacus/user/profile or #spartacus/core bearing in mind that your previously used actions may not exist anymore.
In case it helps, a similar question was also asked here.
Based on technical changes in Spartacus 4.0, Some branches of the ngrx state for the User feature were removed and logic has been moved to facades in #spartacus/user library.
In your case, instead of dispatching an action, simply use the get method from UserAccountFacade that is part of #spartacus/user.

How to add javascript js files into qmldir with qt_add_qml_module

I am creating a Qt6 QML module with qt_add_qml_module.
qt_add_qml_module(SQUtils_Logger_Qml
URI SQUtilsLogger.Qml
VERSION 1.0
SOURCES
LoggerQml.cpp
QML_FILES
Log.js
Logm.mjs
LoggerQml.qml
)
But the generated qmldir contains only the information about the qml file: the js and mjs files are missing.
module SQUtils.Logger.Qml
linktarget SQUtils_Logger_Qmlplugin
optional plugin SQUtils_Logger_Qmlplugin
classname SQUtils_Logger_QmlPlugin
typeinfo SQUtils_Logger_Qml.qmltypes
prefer :/SQUtils/Logger/Qml/
LoggerQml 1.0 LoggerQml.qml
It is a problem because when I run ninja all_qmllint, the compiler/linter complains that Log is not defined:
// View.qml
import SQUtils_Logger_Qml
//import "qrc:/SQUtils/Logger/Qml/Log.js" as Log
ApplicationWindow {
Component.onCompleted: {
Log.debug("QML main application complete")
}
}
Warning: View.qml:120:13: Unqualified access
Log.debug("QML main application complete)
If I append Log 1.0 Log.js to the qmldir file, then the linting works.
What I am doing wrong? Is this a bug? The qt documentation for qt_add_qml_module quotes:
QML_FILES lists the .qml, .js and .mjs files for the module. [...]
The files will also be used to populate type information in the generated qmldir file.
Thank you for your help!
Note: I can manage to run my code by uncommenting import "qrc:/SQUtils/Logger/Qml/Log.js" as Log, but the lint still does not work.
It was indeed a Qt bug, corrected two days ago. It will be corrected in versions greater than 6.2.2:
https://bugreports.qt.io/browse/QTBUG-100326

Javalin Migration from 3 to 4

We are migrating the Javalin from 3 to 4 in our current kotlin project. the dynamicGzip has been deprecated and replaced with compression strategy.
The pom.xml part will look like below.
<properties>
<javalin.version>4.1.1</javalin.version>
<jackson.version>2.13.0</jackson.version>
</properties>
The code part of kotlin is as follows
import io.javalin.Javalin
import io.javalin.apibuilder.ApiBuilder.*
import io.javalin.http.BadRequestResponse
import io.javalin.http.NotFoundResponse
import io.javalin.http.staticfiles.Location
import io.javalin.plugin.json.JavalinJackson
import io.javalin.core.compression.*
val app = Javalin.create { config ->
config.defaultContentType = "application/json"
config.enableWebjars()
config.addStaticFiles("", Location.CLASSPATH)
config.enableCorsForAllgOrigins()
//it.dynamicGzip = true // deprecated method which was used in 3.12.0
config.compressionStrategy(Gzip(6))
}
We are using the migrating document from this link
https://javalin.io/migration-guide-javalin-3-to-4
When we try to build the project in intelij Idea with this change, ended with the below error.
D:\app\src\main\kotlin\app\app.kt:78:40
Kotlin: Unresolved reference: Gzip
What is that we are missing here?
Also it will be helpfull if config.addStaticFiles syntax is also added wrt javalin 4
Compression
The compressionStrategy method of the JavalinConfig class takes two parameters:
void compressionStrategy(Brotli brotli, Gzip gzip)
See the JavaDoc here.
The related classes are found in Javalin here:
import io.javalin.core.compression.Brotli;
import io.javalin.core.compression.Gzip;
So, you can do something like this in your set-up (my example is Java not Kotlin):
// my Java example:
config.compressionStrategy(new Brotli(6), new Gzip(6));
Static Files
You can use something like this (again, a Java example not Kotlin):
// my Java example:
config.addStaticFiles("/public", Location.CLASSPATH);
In this case, because I want my files to be on the runtime classpath, I have also created a public directory in my application's resources directory. Your specific implementation may differ.
You can also use Location.EXTERNAL if you prefer, to place the files somewhere else in your filesystem (outside the application).
Note also there is a small typo in config.enableCorsForAllgOrigins(). It should be:
config.enableCorsForAllOrigins()

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle

I am receiving this warning message in my chrome console for my react-native project. Do you have any idea why I am getting this?
This is the complete message:
Require cycle: node_modules/react-native-radio-buttons/lib/index.js ->
node_modules/react-native-radio-buttons/lib/segmented-controls.js ->
node_modules/react-native-radio-buttons/lib/index.js
Require cycles are allowed, but can result in uninitialized values.
Consider refactoring to remove the need for a cycle.
I appreciate any suggestions.
Thanks
TL;DR: You import module A into module B and module B into module A resulting in a cycle A → B → A → B → A ..., which can result in errors. Resolve that by restructuring your modules, so that the cycle breaks.
Detailed Answer
In javascript if you import different modules into other modules all this importing generates a dependency tree:
root_module
┌───────────┴───────────┐
sub_module_A sub_module_B
┌────────┴────────┐
sub_module_C sub_module_D
When you run your code, all modules will be evaluated from bottom to top or from leaves to the trunk, so that for example if you import modules C and D into module B all exports of C and D are already evaluated and not undefined anymore. If module B would be evaluated before C and D, module B would be not working, because all exports from C and D would be undefined, since they have not been evaluated yet.
Still, it can be possible to form cycles in your dependency tree (this is what you got a warning for):
root_module
┌───────────┴───────────┐
sub_module_A sub_module_B
↑ ↓
sub_module_C
Problem: Let's say the evaluation starts now with module C. Since it imports something from module B and it has not been evaluated yet, module C is not working correctly. All imported stuff from B is undefined. This actually is not that bad, since in the end module C is evaluated once again when everything else has been evaluated, so that also C is working. The same goes if evaluation starts with module B.
BUT: If your code relies on a working module C from the very beginning, this will result in very hard to find errors. Therefore you get this error.
How to solve: In your case the warning also gives a detailed explanation, where the cycle emerges. You import native-radio-buttons/lib/segmented-controls.js in node_modules/react-native-radio-buttons/lib/index.js and node_modules/react-native-radio-buttons/lib/index.js in native-radio-buttons/lib/segmented-controls.js. It seems like the cycle is placed inside some of your node modules. In this case there is unfortunately no way you could solve that by yourself.
If the cycle is in your own code, you have to extract some exports into a third module / file, from which you import the code into both modules previously forming the cycle.
You are probably importing something from "file A" into "file B", then importing something again from "file B" into "file A" .
Examine all the imports from both the files and see if there's any such cycle.
To prevent from having to write multiple lines of
import SomeComponent from "../components"
import AnotherComponent from "../components"
import AndAnotherComponent from "../components"
import AndOneMoreComponent from "../components"
I created a comp.js file where I could import the components as they are created and export them as modules.
All components are then able to be reached from one place.
So you can then have something like this in some place...
import { SomeComponent, AnotherComponent, AndAnotherComponent, AndOneMoreComponent} from './comp'
Now what happens in the renderer for example when SomeComponent is rendered....
import * as React from "react";
import { AnotherComponent} from '../comps';
import { View, Text } from "react-native";
function SomeComponent() {
return (
<>
<AnotherComponent />
<View><Text>EXAMPLE OF SOMECOMPONENT</Text></View>
</>
)
}
export default SomeComponent;
In the example, SomeComponent could be called in the main App, and when it renders it also asks for a component from the comp.js
This is what triggers the Require cycle warning because a module that was imported from one place, is then rendering and asking to import another module from the same place it was rendered from.
What are your thoughts on this, should I revert back to using single import statements or do you think there is a danger in using the module export as it is currently setup?
I my case, I have sold the same problem in react-native navgiation.
What I did ?
Already I was using react-navigation like below
export const containerRef = createRef();
function App(){
return (
<NavigationContainer ref={containerRef}>
....
<NavigationContainer>
);
}
and then I was consuming it like:
import {containerRef} from 'filename';
onPress = ()=> containerRef.current.navigate('Chat');
But I updated like below and warning has gone.
function App(){
return (
<NavigationContainer> // removed ref
....
<NavigationContainer>
);
}
and then I was consuming it like:
import { useNavigation } from '#react-navigation/native';
onPress = ()=> useNavigation.navigate('Chat');
This occurs if your code contains cyclic dependencies. If these dependencies exist within your own libraries, you can easily fix them. But if this is happening in 3rd party libraries, you can't do much except waiting for the developers to fix these.
Another reason might be this: Some imports cause this warning if they're done through the require keyword. Replace these with import statements and you might be good to go. For example,
const abc = require("example"); // Don't use this syntax
import abc from "example" // Use this syntax instead
NOTE: This might vary from project to project. For a detailed understanding of require vs import, refer to this link.
In my case the warning was like this;
Require cycle: src\views\TeamVerification.js -> src\components\TeamVerificationListItem.js ->
src\views\TeamVerification.js Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
As it indicates, TeamVerification was importing TeamVerificationListItem and TeamVerificationListItem was also importing TeamVerification. It was an unused import but after I remove it the warning gone.
As others have already mentioned, for your own packages
Move things required within two modules by each other into a third module
Avoid imports from barrel-files (index.ts/js) or aliases (#mycompany/my-module) if you are within the same "my-module"
What others have not mentioned (and which seems to be the problem for OP), for packages not within your responsibility (eg node_modules from NPM), the only thing you can do is
Disable the warning. It will still show up in metro console, but no more yellow warning snackbar: import { LogBox } from 'react-native'; LogBox.ignoreLogs(['Require cycle: node_modules/']); You can place the code in App.tsx, for example.
Modify the package contents of the node_modules itself and patch the package contents after every npm install via patch-package => I think this is an overkill if the circular imports don't produce actual errors
You should use the Relation wrapper type in relation properties in ES Modules projects to avoid circular dependency issues, just click here: https://typeorm.io/#relations-in-esm-projects
In my case, i had the same warning after the installation of a 'package'
and in their documentation, it was import SomeFunc from 'package'
and instantly the warning showed up
Require cycles are allowed but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
but as soon as I destructure the SomeFunc there was no more warning
import {SomeFunc} from 'package'
please look at the destructuring
I used react-native-maps in my project and I got the same error.
Just upgraded from 0.27.1 -> 0.28.0.
I can confirm that this issue is fixed.
Thank you
if use NavigationContainer in #react-navigation/native
import {createRef} from 'react';
<NavigationContainer ref={createRef()}>
Please check whether you have imported same details within that file.
(i.e)
your file being as a actions/meals.js and you have added the line in the same file like
import { Something } from './actions/meals.js'

Mulesoft Anypoint Studio DevKit - #Connector vs #Module ( No need for config-ref )

I am trying to create a component that does not need a connection to another source or for that fact a connection strategy... but no matter what I try I cannot prevent the component from having a "Basic Settings" > "Connector Configuration" dropdown/create/edit section in the "Mule Properties" section when working with the components settings.
Does anyone know how I create an Anypoint DevKit Component that does not need a "Connector Configuration" ?
My understanding is that annotations play a big role in defining this and that the connecotr uses the #Connector and that someone has mentioned to me the need to substitute this with the #Module annotation as this indicates no need for a connection... but even when doing this the config options remain on the component.
Please see the following code:
( note : I am trying to create a custom logger and need only to have several inputs and a dropdown operation which I can already get working. )
package au.com.company.companylogger;
import org.mule.api.annotations.Configurable;
import org.mule.api.annotations.Module;
import org.mule.api.annotations.Processor;
import org.mule.api.annotations.param.Default;
import org.mule.api.annotations.param.Optional;
#Module(name="company-logger", friendlyName="companyLogger", schemaVersion="1.0.0-SNAPSHOT")
public class companyLoggerConnector {
#Processor(name="company-logger-trace", friendlyName="TRACE")
public String companyLoggerTrace(String strStep) {
/*
* MESSAGE PROCESSOR CODE GOES HERE
*/
return "TRACE : " + strStep;
}
#Processor(name="company-logger-debug", friendlyName="DEBUG")
public String companyLoggerDebug(String strStep) {
/*
* MESSAGE PROCESSOR CODE GOES HERE
*/
return "DEBUG : " + strStep;
}
}
I unfortunately do not have enough reputation to provide you with an image of the config I do not need.
Any help or suggestions are welcomed.
With Anypoint Devkit 3.6, the "config-ref" attribute on elements became required, so you NEED to create a global element definition for your connector. As far as I know, there isn't a way to get around this at this point.
HTH
The config element name can be changed using the configElementName attribute in #Connector or #Module
#Module(name="company-logger", friendlyName="companyLogger", configElementName="xx", schemaVersion="1.0.0-SNAPSHOT")
If you do not set this attribute, it will default to "config". May be if you provide an empty string or null then it will not show up. I haven't tried it before though.