I try to test a polymer-component written in dart using the "test" package, following the instructions on https://pub.dartlang.org/packages/test.
In pubspec.yaml, I set my transformers like this:
transformers:
- web_components:
entry_points:
- web/foo.html
- test/my_component_test.html
- reflectable:
entry_points:
- web/foo.dart
- test/pub_serve:
$include:
- test/**_test{.*,}.dart
my_component_test.html looks like this:
<!doctype html>
<html>
<head>
<title>Custom HTML Test</title>
<link rel="x-dart-test" href="my_component_test.dart">
<script src="packages/test/dart.js"></script>
</head>
<body><my-component id="abc"></my-component></body>
</html>
my_component_test.dart like this:
#TestOn("browser")
import "dart:html";
import "package:test/test.dart";
import 'package:polymer/polymer.dart';
import '../web/my_component.dart';
void main() {
MyComponent componentUnderTest;
setUpAll(() {
return initPolymer();
});
setUp(() {
componentUnderTest = document.body.querySelector("#abc");
});
test("my-component should be initialized correctly", () {
Element heading = componentUnderTest.shadowRoot.querySelector('h1');
expect(heading.text, equals('This is my component'));
});
}
If I try to run the tests using pub serve and pub run test:test --pub-serve=8081 -p firefox in two separate terminals, there are two different errors:
[Error from WebComponents on polymer_dart_example|test/my_component_test.html]:
Unable to import `polymer_dart_example/web/my_component.dart` from polymer_dart_example|test/my_component_test.bootstrap.initialize.dart.
[Error from WebComponents on polymer_dart_example|test/my_component_test.html]:
Can't import `polymer_dart_example|web/my_component.dart` from `polymer_dart_example|test/my_component_test.bootstrap.initialize.dart`
Build error:
Transform WebComponents on polymer_dart_example|test/my_component_test.html threw error: Could not format because the source could not be parsed:
line 16, column 1 of <unknown>: Directives must appear before any declarations
import 'package:polymer/src/common/polymer_register.dart' as i13;
while compiling and
NullError: receiver is undefined
package:web_components/src/init.dart 31:1 J.$asx
package:polymer/init.dart 28:22 <fn>
package:stack_trace init.<fn>.<fn>
package:polymer/init.dart 31:3 dart<._setUpPropertyChanged
package:path/src/style/windows.dart 95:71 dart<.initPolymer.<fn>
===== asynchronous gap ===========================
while testing (caused by initPolymer()).
I suspect there is something wrong with my configuration, but I can't figure out what the problem is. The component itself is working fine.
test/my_component_test.dart needs to be added to the reflectable transformer.
I'm also pretty sure await initPolymer(); needs to be outside the setUpAll() method, at least there is no reason to wrap it with setUpAll().
void main() async {
MyComponent componentUnderTest;
await return initPolymer();
...
test(...);
group(...);
}
Related issue https://github.com/dart-lang/polymer-dart/issues/649
Related
I'm using Rails 7 import map feature to build a chart.
This is what I did.
./bin/importmap pin vega#5
./bin/importmap pin vega-lite#5
./bin/importmap pin vega-embed#6
And in the browser, I can see this Uncaught SyntaxError: The requested module 'vega-loader' does not provide an export named 'default' error on the console.
This is the similar code from the https://generator.jspm.io/ sandbox.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--
JSPM Generator Import Map
Edit URL: https://generator.jspm.io/#U2VhYGBmD80rySzJSU1hKEtNT9RNzU1KTXEw0zMy1DOAiORklqQ6mOqZQflAppGRniEAk3dJ3DwA
-->
<script type="importmap">
{
"imports": {
"vega": "https://ga.jspm.io/npm:vega#5.22.1/build/vega.module.js",
"vega-embed": "https://ga.jspm.io/npm:vega-embed#6.21.0/build/vega-embed.module.js",
"vega-lite": "https://ga.jspm.io/npm:vega-lite#5.6.0/build/src/index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"buffer": "https://ga.jspm.io/npm:#jspm/core#2.0.0-beta.27/nodelibs/browser/buffer.js",
"clone": "https://ga.jspm.io/npm:clone#2.1.2/clone.js",
"d3-array": "https://ga.jspm.io/npm:d3-array#3.1.1/src/index.js",
"d3-color": "https://ga.jspm.io/npm:d3-color#3.1.0/src/index.js",
"d3-delaunay": "https://ga.jspm.io/npm:d3-delaunay#6.0.2/src/index.js",
"d3-dispatch": "https://ga.jspm.io/npm:d3-dispatch#3.0.1/src/index.js",
"d3-dsv": "https://ga.jspm.io/npm:d3-dsv#3.0.1/src/index.js",
"d3-force": "https://ga.jspm.io/npm:d3-force#3.0.0/src/index.js",
"d3-format": "https://ga.jspm.io/npm:d3-format#3.1.0/src/index.js",
"d3-geo": "https://ga.jspm.io/npm:d3-geo#3.0.1/src/index.js",
"d3-geo-projection": "https://ga.jspm.io/npm:d3-geo-projection#4.0.0/src/index.js",
"d3-hierarchy": "https://ga.jspm.io/npm:d3-hierarchy#3.1.2/src/index.js",
"d3-interpolate": "https://ga.jspm.io/npm:d3-interpolate#3.0.1/src/index.js",
"d3-path": "https://ga.jspm.io/npm:d3-path#3.0.1/src/index.js",
"d3-quadtree": "https://ga.jspm.io/npm:d3-quadtree#3.0.1/src/index.js",
"d3-scale": "https://ga.jspm.io/npm:d3-scale#4.0.2/src/index.js",
"d3-shape": "https://ga.jspm.io/npm:d3-shape#3.1.0/src/index.js",
"d3-time": "https://ga.jspm.io/npm:d3-time#3.0.0/src/index.js",
"d3-time-format": "https://ga.jspm.io/npm:d3-time-format#4.1.0/src/index.js",
"d3-timer": "https://ga.jspm.io/npm:d3-timer#3.0.1/src/index.js",
"delaunator": "https://ga.jspm.io/npm:delaunator#5.0.0/index.js",
"fast-deep-equal": "https://ga.jspm.io/npm:fast-deep-equal#3.1.3/index.js",
"fast-json-patch": "https://ga.jspm.io/npm:fast-json-patch#3.1.1/index.mjs",
"fast-json-stable-stringify": "https://ga.jspm.io/npm:fast-json-stable-stringify#2.1.0/index.js",
"internmap": "https://ga.jspm.io/npm:internmap#2.0.3/src/index.js",
"json-stringify-pretty-compact": "https://ga.jspm.io/npm:json-stringify-pretty-compact#3.0.0/index.js",
"robust-predicates": "https://ga.jspm.io/npm:robust-predicates#3.0.1/index.js",
"topojson-client": "https://ga.jspm.io/npm:topojson-client#3.1.0/dist/topojson-client.js",
"vega-canvas": "https://ga.jspm.io/npm:vega-canvas#1.2.6/build/vega-canvas.min.js",
"vega-crossfilter": "https://ga.jspm.io/npm:vega-crossfilter#4.1.0/build/vega-crossfilter.module.js",
"vega-dataflow": "https://ga.jspm.io/npm:vega-dataflow#5.7.4/build/vega-dataflow.js",
"vega-encode": "https://ga.jspm.io/npm:vega-encode#4.9.0/build/vega-encode.module.js",
"vega-event-selector": "https://ga.jspm.io/npm:vega-event-selector#3.0.0/build/vega-event-selector.module.js",
"vega-expression": "https://ga.jspm.io/npm:vega-expression#5.0.0/build/vega-expression.module.js",
"vega-force": "https://ga.jspm.io/npm:vega-force#4.1.0/build/vega-force.module.js",
"vega-format": "https://ga.jspm.io/npm:vega-format#1.1.0/build/vega-format.module.js",
"vega-functions": "https://ga.jspm.io/npm:vega-functions#5.13.0/build/vega-functions.module.js",
"vega-geo": "https://ga.jspm.io/npm:vega-geo#4.4.0/build/vega-geo.module.js",
"vega-hierarchy": "https://ga.jspm.io/npm:vega-hierarchy#4.1.0/build/vega-hierarchy.module.js",
"vega-interpreter": "https://ga.jspm.io/npm:vega-interpreter#1.0.4/build/vega-interpreter.js",
"vega-label": "https://ga.jspm.io/npm:vega-label#1.2.0/build/vega-label.module.js",
"vega-loader": "https://ga.jspm.io/npm:vega-loader#4.5.0/build/vega-loader.browser.module.js",
"vega-parser": "https://ga.jspm.io/npm:vega-parser#6.1.4/build/vega-parser.module.js",
"vega-projection": "https://ga.jspm.io/npm:vega-projection#1.5.0/build/vega-projection.module.js",
"vega-regression": "https://ga.jspm.io/npm:vega-regression#1.1.0/build/vega-regression.module.js",
"vega-runtime": "https://ga.jspm.io/npm:vega-runtime#6.1.3/build/vega-runtime.js",
"vega-scale": "https://ga.jspm.io/npm:vega-scale#7.2.0/build/vega-scale.module.js",
"vega-scenegraph": "https://ga.jspm.io/npm:vega-scenegraph#4.10.1/build/vega-scenegraph.module.js",
"vega-schema-url-parser": "https://ga.jspm.io/npm:vega-schema-url-parser#2.2.0/dist/parser.js",
"vega-selections": "https://ga.jspm.io/npm:vega-selections#5.4.0/build/vega-selection.module.js",
"vega-statistics": "https://ga.jspm.io/npm:vega-statistics#1.8.0/build/vega-statistics.module.js",
"vega-themes": "https://ga.jspm.io/npm:vega-themes#2.12.0/build/vega-themes.module.js",
"vega-time": "https://ga.jspm.io/npm:vega-time#2.1.0/build/vega-time.module.js",
"vega-tooltip": "https://ga.jspm.io/npm:vega-tooltip#0.28.0/build/vega-tooltip.module.js",
"vega-transforms": "https://ga.jspm.io/npm:vega-transforms#4.10.0/build/vega-transforms.module.js",
"vega-util": "https://ga.jspm.io/npm:vega-util#1.17.0/build/vega-util.module.js",
"vega-view": "https://ga.jspm.io/npm:vega-view#5.11.0/build/vega-view.module.js",
"vega-view-transforms": "https://ga.jspm.io/npm:vega-view-transforms#4.5.8/build/vega-view-transforms.js",
"vega-voronoi": "https://ga.jspm.io/npm:vega-voronoi#4.2.0/build/vega-voronoi.module.js",
"vega-wordcloud": "https://ga.jspm.io/npm:vega-wordcloud#4.1.3/build/vega-wordcloud.js"
}
}
}
</script>
<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
<script async src="https://ga.jspm.io/npm:es-module-shims#1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="module">
import * as vega from "vega";
import * as vegaEmbed from "vega-embed";
import * as vegaLite from "vega-lite";
// Write main module code here, or as a separate file with a "src" attribute on the module script.
console.log(vega, vegaEmbed, vegaLite);
</script>
</body>
</html>
I'm using electron-react-boilerplate v4.0.0
I've exposed this electron api from preload.js to use in renderer process.
preload.js
The problem comes when trying use "window.electron.ipcRenderer.printTicket()" inside a react component.
Hello React Component
I have the Error: "window.electron does not exist on type 'Window & typeof globalThis'".
#Daniel,
Try this:-
Edit your index.tsx from something like this:-
import { render } from "react-dom";
import App from "./App";
render(<App />, document.getElementById("root"));
to something like this:-
import { render } from "react-dom";
import App from "./App";
declare global {
interface Window {
electron: any;
}
}
render(<App />, document.getElementById("root"));
Now you can use window.electron anywhere in the renderer. This fixed the problem for me. You could also add this in the App.js file.
Although I have not tested it, you can do something like this too:-
preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
hworld: "Hello world" // window.electron.hworld is a string ("Hello world")
});
index.tsx
import { render } from "react-dom";
import App from "./App";
declare global {
interface Window {
electron: {
hworld: string // Since you know window.electron.hworld is a string
}
}
}
render(<App />, document.getElementById("root"));
I've begun a project using Angular5 inside a ASP.NET MVC project. I've been following the official tutorial on the Angular site, just to get my feet wet, and it's been great until now.
I've gotten to the end of the tutorial, using the Http module, but I can't get the module imported. When I add the HttpClientModule into the the imports list I get this console error:
Error: Unexpected token <
Evaluating http://localhost:54129/node_modules/#angular/common/bundles/common.umd.js/http
Evaluating http://localhost:54129/app/app.module.js
Evaluating http://localhost:54129/app/main.js
Loading app/main.js
at eval ()
at evaluate (evaluate.js:106)
at instantiate.js:394
at dynamicExecute (register-loader.js:665)
at doEvaluate (register-loader.js:612)
at ensureEvaluate (register-loader.js:520)
at register-loader.js:538
at Object.eval (:54129/app/app.module.js:12)
at eval (:54129/app/app.module.js:34)
at eval (:54129/app/app.module.js:35)
(anonymous) # localhost/:20
With some searching I found that I maybe needed to include:
'#angular/common/http': 'npm:#angular/common/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js'
into my systemjs.config.js file, which I have done, but it hasn't resolved the error.
Here's my app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountInfoComponent } from './AccountInfo/AccountInfoComponent';
import { VehicleComponent } from './Vehicle/VehicleComponent';
import { UserService } from './Services/UserService';
import { CustomerService } from './Services/CustomerService';
#NgModule({
imports: [BrowserModule, FormsModule, AppRoutingModule, HttpClientModule],
declarations: [AppComponent, AccountInfoComponent, VehicleComponent],
bootstrap: [AppComponent],
providers: [UserService, CustomerService]
})
export class AppModule { }
And my systemjs.config.js:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/common/http': 'npm:#angular/common/bundles/common-http.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
Any idea what I'm missing or what I'm doing wrong?
This error could be caused how it's being built (with, I assume, the angular CLI(. What flags are you using on ng build? Check out the file names in the angular CLI destination directory. In the dev build, the files are called "inline.bundle.js"; in the production build, cache busting is implemented, so they have funky names like "inline.d78byc79tcnuasdf.bundle.js".
Something like this should work:
ng build --prod --ec=false --oh=media
This keeps the scripts and styles in the same format as in development.
The diferent flags for prod and dev builds are discussed in the docs here: https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds
Our site is an existing MVC site and we are working on adding and replacing some parts with angular 2 components. We do not have a full angular 2 app to launch, so we are just using bootstrap to launch our components on the pages we want them.
I updated my package.json dependencies from "2.0.0-rc.1" to "~2.2.0" and now have the latest angular 2 files. I can no longer use import { bootstrap } from '#angular/platform-browser-dynamic' and launch my component with: bootstrap(MyCountComponent, [HTTP_PROVIDERS, MyService]);.
Searching it seems to have been updated to import { platformBrowserDynamic } from '#angular/platform-browser-dynamic'; and now I should launch with: platformBrowserDynamic().bootstrapModule(MyCountComponent, [HTTP_PROVIDERS, MyService]);
When I do this I'm getting the browser Console error:
Unhandled Promise rejection: (SystemJS) No NgModule metadata found for 'MyCountComponent'.
Error: No NgModule metadata found for 'MyCountComponent'...
Do I need to convert my components to modules now or is there a new way to bootstrap launch the components without a module?
Here is a code sample.
//mycount.ts
import { MyService } from '../../services/my.service';
import { HTTP_PROVIDERS } from '#angular/http';
import { bootstrap } from '#angular/platform-browser-dynamic'
import { MyCountComponent } from './mycount.component';
bootstrap(MyCountComponent, [HTTP_PROVIDERS, MyService]);
//mycount.component.ts
import { Component } from '#angular/core';
import { NgControl } from '#angular/forms';
import { MyService } from '../../services/my.service';
#Component({
selector: 'mycount',
templateUrl: './app/components/mycount/mycount.component.html'
})
export class MyCountComponent {
constructor(private _myService: MyService) {
}
get mycount() {
return this._myService.mycount;
}
}
//systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
'#angular/upgrade/static': 'npm:#angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
EDIT
If I have:
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule
],
bootstrap: [MyCountComponent, MyListComponent, MyDetailsComponent],
declarations: [MyCountComponent, MyListComponent, MyDetailsComponent],
exports: [MyCountComponent, MyListComponent, MyDetailsComponent],
providers: [MyService]
})
Is it possible for my page to only load 1 or 2 of the components?
I tried calling it with:
platformBrowserDynamic().bootstrapModule(MyModule, [HttpModule, MyListComponent]);
but I get an error message for any component tags missing from the page.
you need to create main #NgModule where you can import all Services, Components, Directives etc. using #NgModule you can tell your app that which component should bootstrap.
here is official links to understand that #ngModule please go through this: https://angular.io/docs/ts/latest/guide/ngmodule.html
Tips: please use Angular-cli which will create a basic structure of app just in few minutes. using Angular-cli you no need to create structued app or basic setup it will do it for you.
I work with websocket in go. And I got a websocket url format from a trivial example that I google like this:
ws://{{$}}/ws
Relatively complete code below:
home.html:
<html>
<head>
<title>Chat Example</title>
<script type="text/javascript">
$(function() {
......
if (window["WebSocket"]) {
conn = new WebSocket("ws://{{$}}/ws");
conn.onclose = function(evt) {
appendLog($("<div><b>Connection closed.</b></div>"))
}
conn.onmessage = function(evt) {
appendLog($("<div/>").text(evt.data))
}
} else {
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
}
......
});
</script>
</head>
</html>
And wsServer.go:
package main
import (
"flag"
"log"
"net/http"
"text/template"
)
var addr = flag.String("addr", ":8080", "http service address")
var homeTempl = template.Must(template.ParseFiles("home.html"))
func serveHome(w http.ResponseWriter, r *http.Request) {
......
w.Header().Set("Content-Type", "text/html; charset=utf-8")
homeTempl.Execute(w, r.Host)
}
func main() {
http.HandleFunc("/", serveHome)
http.HandleFunc("/ws", serveWs)
err := http.ListenAndServe(:8080, nil)
if err != nil {
log.Fatal("ListenAndServe: ", err)
}
}
I thought it would be a regular expression while actually I can't explain it.
I test it on my own PC browser, and connect success with:
http://localhost:8080
but
http://ip:8080 (which ip is my computer's also the litsening server's ip)
not.
And why?
Of course it works when I change "ws://{{$}}/ws" to a certain url. But I want to know why?And what can this expression matching for?
The complete example code is large, I think above is enough to the question. If I miss something you can find out complete example in this page : https://github.com/garyburd/go-websocket/tree/master/examples/chat
I'm guessing you are using the template package of Go. The template package supports {{ placeholders }} that are annotated by those curly brackets. Those curly brackets might contain statements like range, if etc, and variable names. The variable name $ is a special name that points to the root element that was passed to the template.Execute method.
Please add the code of your wsServe method so that we can see what value your are passing to your template. I will extend my answer afterwards.