I have a class in Dart like this
import 'package:js/js.dart';
import 'dart:html';
import 'dart:js' as js;
class VistorianTab {
void showMatrix() {
var dataset = new networkcube.DataSet({
name: dataSetName,
nodeTable: [...],
linkTable: [...],
nodeSchema: {...},
linkSchema: {...}
});
}
I get the error because networkcube isn't defined, I imported the library in the index.html.
The library is this : https://github.com/networkcube/vistorian/blob/master/core/networkcube.js
I'm new to Dart, I'm sorry if I repeteaded a question.
Thank you for your time.
Related
I couldn't seem to find any related question to my problem on here, so i decided to ask my first question, please be gentle :>
I want to provide an endpoint for frontend logging in several of our backends that use nestjs.
To solve this, i want to use a dynamic module that exposes said endpoint and package it as an npm package to be used in other applications.
I inject a logger into the controller via an injection token and the logging service via nestjs standard dependency injection.
The problem now is, after publishing the module, installing it in another application, the service i injected via nestjs standard DI is undefined.
I tried to follow the nestjs documentation as closly as possible when it comes to dynamic modules.
I also tried to retrieve the service via ModuleRef, but still the same problem. In this case, moduleRef is undefined.
Here is basically all of the involved code:
frontend-log.module.ts:
import { DynamicModule, Module } from "#nestjs/common";
import { FrontendLogService } from "./frontend-log.service";
import { Logger } from "./interfaces/logger";
import { FrontendLogController } from "./frontend-log.controller";
#Module({})
export class FrontendLogModule {
static forRoot(logger: Logger): DynamicModule {
return {
module: FrontendLogModule,
controllers: [FrontendLogController],
providers: [FrontendLogService, { provide: "LOGGER", useValue: logger }],
};
}
}
frontend-log.controller.ts:
import { Body, Controller, Inject, Post, Req } from "#nestjs/common";
import { FrontendLogMessage } from "../model/frontend-log-message";
import { Request } from "express";
import { RequestWithToken } from "../model/request-with-token";
import { Logger } from "./interfaces/logger";
import { ArrayMaxSize, ArrayMinSize, ValidateNested } from "class-validator";
import { Type } from "class-transformer";
import { FrontendLogService } from "./frontend-log.service";
class FrontendLogData {
#Type(() => FrontendLogMessage)
#ArrayMinSize(1)
#ArrayMaxSize(20)
#ValidateNested({ each: true })
messages: FrontendLogMessage[];
}
#Controller()
export class FrontendLogController {
constructor(
#Inject("LOGGER") private logger: Logger,
private logService: FrontendLogService
) {}
#Post("log")
public log(#Req() req: Request, #Body() data: FrontendLogData) {
this.logService.logFrontendMessages( // logService is undefined here
this.logger,
data.messages,
(req as RequestWithToken).kauth.grant.access_token.content
);
}
}
frontend-log.service.ts:
import { Injectable } from "#nestjs/common";
import { FrontendLogMessage } from "../model/frontend-log-message";
import { AccessTokenContent } from "../model/request-with-token";
import { Logger } from "./interfaces/logger";
#Injectable()
export class FrontendLogService {
public logFrontendMessages(
logger: Logger,
data: FrontendLogMessage[],
accessToken?: AccessTokenContent
) {
const user = accessToken
? `${accessToken.name} (${accessToken.sub})`
: "anonymous";
data.forEach((logEntry) => {
logger.log(logEntry.level, `[FRONTEND] [${user}] ${logEntry.message}`);
});
}
}
I then build the package and publish it.
After installing it in the consuming project I import the frontend-log.module into the AppModule as follows:
#Module({
imports: [
// ...
FrontendLogModule.forRoot(getLogger('debug')),
],
controllers: [
// ...
],
providers: [
// ...
],
})
export class AppModule implements NestModule {
// ...
}
When i then try to post to the /log endpoint via Postman, the following error occurs:
[Nest] 15280 - 26.10.2022, 09:03:50 ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'logFrontendMessages')
TypeError: Cannot read properties of undefined (reading 'logFrontendMessages')
at FrontendLogController.log
This tells me, the frontend-log.controller works properly, since the log endpoint is exposed as expected.
So my question: What am I doing wrong here, is there something i am not considering, when it comes to publishing nestjs Modules over npm? Or am I doing some rookie mistake here?
I want to override an action from cart module store. I am trying to extend this CartModule by following this link
Extending and Overriding Modules Doc
I have created a file /src/modules/cart/index.ts with following code
import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '#vue-storefront/core/lib/module'
import { CartModule } from '#vue-storefront/core/modules/cart'
import { cartModule } from './store'
const cartExtend: VueStorefrontModuleConfig = {
key: 'cart',
store: {modules: [{key: 'cart', module: cartModule}]},
afterRegistration: function () {
console.log('Cart module extended')
}
}
extendModule(cartExtend)
export const registerModules: VueStorefrontModule[] = [CartModule]
I am getting error that CarModule type does not match with VueStorefrontModule
Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks
If you want to overwrite action of module you don't want to extend module but store.
Here is example:
Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.
Code your in file /src/modules/cart/index.ts:
import {StorefrontModule} from '#vue-storefront/core/lib/modules';
import {extendStore} from '#vue-storefront/core/helpers';
const cartModule = {
action: {
async refreshTotals({dispatch}, payload) {
//
// your new (and better!) code ;-)
//
}
},
}
export const MyAwesomeCart: StorefrontModule = function () {
extendStore('cart', cartModule);
}
In last step register this your new module under /src/modules/client.ts:
..
...
import {CartModule} from '#vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";
export function registerClientModules() {
registerModule(CartModule); // original module
registerModule(MyAwesomeCart); // your new overwiritng module
...
..
I'm currently studying java spring and d3.js. And found myself on a roadblock since i can't seem to find the right answer to my problem after countless trial and error plus research.
The code below is the one that is my controller:
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import dashboard.atmandcam.model.MyModel;
import dashboard.atmandcam.repo.MyRepo;
#RestController
public class MyController {
#Autowired
private MyRepo myRepo;
#GetMapping("/test")
public String sayHi() {
return "hi";
}
#GetMapping("/queries")
public List<MyModel> getResult(){
return myRepo.getQueryResult();
}
#GetMapping("/queries/{id}")
public List<MyModel> getSpecific(#PathVariable String id){
return myRepo.getSpecificResult(id);
}
}
Then this is my d3.js
var url = "/queries/31370100";
d3.json(url, function(data) {
console.log(data);
});
the result of my controller is w/ the URL (http://localhost:9090/queries/31370100):
I wanna know how can i use the JSON found on my url in d3.js so i can build my charts around my database.
I have a really simple question but I couldn't find any documentations for it.
I have 4 ts files.
/main.ts
/sub/forms.ts
/sub/validators.ts
/sub/location.ts
I'm using Visual Studio Code to code and when I save a TypeScript file, it auto compiles it and creates a JS file (ES5).
my problem is.. when I save main.ts file, how can I have forms.ts, validators.ts and location.ts in it as well?
In PHP, we simple use include('filename.php');
Is there way to do it in TypeScript?
main.ts;
import { Forms } from "./sub/forms";
import { Validators } from "./sub/validators";
import { Location } from "./sub/location";
let emp1 = new Validators('TEST');
emp1.greet();
/sub/validators.ts;
export class Validators {
employeeName: string;
constructor(name: string) {
this.employeeName = name;
}
greet() {
console.log(`Good morning ${this.employeeName}`);
}
}
main.js (after auto save compile)
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var validators_1 = require("./sub/validators");
var emp1 = new validators_1.Validators('TEST');
emp1.greet();
it doesn't import the validators.ts code into main.js
I am creating a plugin using Typescript which creates a DOM for Header and attach that to the page. This project uses JQuery for DOM operations. I want to pass config Options to the plugin from the HTML page. For that, I am extending JQuery with my custom function and passing the options in it.
But the problem is when I load that HTML page, I get an error: "$(...).createCentralHeader is not a function".
Here is my Index.html file:
<!DOCTYPE html>
<html lang="en">
<body class="siteheader-body">
<div class="cep-Header"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./dist/cep_HeaderCore.js"></script>
<script>
$('cep-Header').createCentralHeader({
headerUrl: "Hello World!!"
});
</script>
</body>
</html>
Here is my main.ts file:
import * as $ from "jquery";
$.fn.createCentralHeader = function(this: JQuery, options?: HeaderOptions) {
const settings: HeaderOptions = {
headerUrl: options.headerUrl
};
alert(settings.headerUrl);
};
Here is my central-header.d.ts :
interface HeaderOptions {
headerUrl?: string;
}
interface JQuery {
createCentralHeader(options?: HeaderOptions);
}
I am using webpack which uses ts-loader to transpile TS and bundle my plugin into a file cep_HeaderCore.js that is referenced in index.html.
One more important thing to note here is that if I invoke createCentralHeader from within the plugin, it works as expected. eg:
import * as $ from "jquery";
$.fn.createCentralHeader = function(this: JQuery, options?: HeaderOptions) {
const settings: HeaderOptions = {
headerUrl: options.headerUrl
};
alert(settings.headerUrl);
};
$("cep-Header").createCentralHeader({
headerUrl: "Hello World!!"
});
What is going wrong here?
You should add to angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
and jquery is extended in main.ts file with next code
window['$'].fn.test = function (message: string) {
alert(message);
};
or with extending Windows interface without using property in quotes