Opportunity:
Hello, I have a situation that I simply can't figure-out. I am getting these errors from Dart when I run a quite simple example:
[13288:9212:0320/161303:ERROR:navigation_entry_screenshot_manager.cc(147)] Invalid entry with unique id: 3
[14080:11508:0320/155717:ERROR:chrome_views_delegate.cc(185)] NOT IMPLEMENTED
[14080:11508:0320/155717:ERROR:desktop_root_window_host_win.cc(753)] NOT IMPLEMENTED
[14080:11508:0320/155719:ERROR:desktop_root_window_host_win.cc(753)] NOT IMPLEMENTED
[14080:11508:0320/155747:ERROR:extension_icon_image.cc(201)] Start loading extension icon for Chromium. scale = 1
The messages don't really connect to the Use-Case I'm implementing. My attempts to use debug and other tools have come to not much indeed. I have 'reduced' the problem to a simple example based on the DartPolymer example:
Define a Custom Element tutorial.
This tutorial defines a DartPolymer component called <tut-stopwatch>. In my example I have copied that element as two clones: <x-fred> and <z-fred>. Everything is identical in a diff command, except the names and tags.
The layout of the main index.html page is as follows:
<body>
<x-fred> </x-fred>
<hr/>
<h1>Stopwatch</h1>
<tut-stopwatch> </tut-stopwatch>
<hr/>
<z-fred> </z-fred>
</body>
Investigation so far:
I put a break-point on the DOM register call and the stopwatch creator (constructor):
class TuteStopwatch extends PolymerElement {
#observable String counter='00:00';
TuteStopwatch.created() : super.created();
:
}
The "unique id message" as I call it comes up:
[13288:9212:0320/161303:ERROR:navigation_entry_screenshot_manager.cc(147)] Invalid entry with unique id: 3
During debugging. There's no clear connection to the code executing and I think that this is an async message, unrelated to the registration of the <tut-stopwatch> component.
The other two examples (different in name and a label only): <x-fred> and <z-fred> work fine. It is just the <tut-stopwatch> element that poses a problem.
This is difficult for two reasons:
I have a stand-alone <tut-stopwatch> example working fine.
Despite text and lexical code-compare of three bits of "congruent" code, one is flawed in a specific context. It speaks to a lack of robustness some place.
Obviously I need a bit of direction on where to look for the problem. It reminds me of those games: "One of these things is not like the other . . . "
Thanks in advance.
Code
<tut-stopwatch>
Based on: Define a Custom Element example:
// Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';
#CustomTag('tute-stopwatch')
class TuteStopwatch extends PolymerElement {
#observable String counter='00:00';
TuteStopwatch.created() : super.created();
Stopwatch mywatch = new Stopwatch();
Timer mytimer;
:
}
<x-fred>
#CustomTag('x-fred')
//#CustomTag('tute-stopwatch')
class XFred extends PolymerElement {
#observable String counter='00:00';
XFred.created() : super.created();
Stopwatch mywatch = new Stopwatch();
Timer mytimer;
Stopwatch mywatch = new Stopwatch();
Timer mytimer;
:
}
Note: each element is in a different sub-folder and there is no name space collision between on the TuteStopwatch{...} class with <x-fred> and <z-fred>
tut_stopwatch.html
This file is in its own folder with tute_stopwatch.dart:
elements/fred/tute_stopwatch.html
<template>
<style>
:host {
background-color: yellow;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
</style>
<div>
<div> stopwatch:
{{counter}}
</div>
<div>
<button on-click="{{start}}" id="startButton">Start</button>
<button on-click="{{stop}}" id="stopButton">Stop</button>
<button on-click="{{reset}}" id="resetButton">Reset</button>
</div>
</div>
</template>
<script type="application/dart" src="tute_stopwatch.dart"> </script>
fred.html (<x-fred>)
This file is in its own folder with Fred.dart:
elements/fred/fred.html
<template>
<style>
:host {
background-color: blue;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
</style>
<div>
<div> fred:
{{counter}}
</div>
<div>
<button on-click="{{start}}" id="startButton">Start</button>
<button on-click="{{stop}}" id="stopButton">Stop</button>
<button on-click="{{reset}}" id="resetButton">Reset</button>
</div>
</div>
</template>
<script type="application/dart" src="fred.dart"> </script>
github
I have put the failing case on GitHub here:
- https://github.com/aplatypus/dart-experiments
This version fails to show the tute-stopwatch element. Yet clones with a different name work OK. Same code, just different names.
work-around
I can report that I have a work-around. I'm more or less convinced that its a Dart or Dart Editor bug though.
The fix was to manually rename: <tute-stopwatch> to: <x-stopwatch>
The x-stopwatch version of the (same) code then worked a-OK. Then I renamed the custom element back again to:
<tute-stopwatch>
And now the: <tute-stopwatch> is working.
I don't think its a satisfying resolution because I pretty much purged the project folder and Packages cache a couple of times. There be something hanging about me thinks.
Also I'm still seeing odd errors:
F:\.bin\dev\dart\dev\chromium\Chrome.exe --remote-debugging-port=59082 --user-data-dir=C:\Users\william\.dartium --enable-experimental-web-platform-features --enable-html-imports --no-first-run --no-default-browser-check --no-process-singleton-dialog chrome://version/
[18040:16896:0322/210119:ERROR:chrome_views_delegate.cc(185)] NOT IMPLEMENTED
[18040:16896:0322/210119:ERROR:desktop_root_window_host_win.cc(753)] NOT IMPLEMENTED
[18040:16896:0322/210121:ERROR:desktop_root_window_host_win.cc(753)] NOT IMPLEMENTED
When I completely remove the tute-stopwatch element the messages go away, but I still see this:
[18040:16896:0322/210647:ERROR:navigation_entry_screenshot_manager.cc(147)] Invalid entry with unique id: 6
The number for 'unique id' changes from run to run of course.
I figured I'd post the outcome. If you have a similar situation try a different name for the element in question. That may help someone facing similar weirdness.
Related
Maybe someone tried this before and is able to give me a hint.
I have used normal svelte setup (mentioned in the main page) which scaffolds the app;
npx degit sveltejs/template my-svelte-project
I wanted to use vaadin web components in Svelte. I've installed it;
npm install #vaadin/vaadin
the code of main.ts:
<script lang="ts">
import '#vaadin/button/theme/material'
</script>
<main>
<vaadin-button theme="primary">Primary</vaadin-button>
<vaadin-button theme="secondary">Sec</vaadin-button>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
#media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
And the thing is that it almost works :) The buttons are styled, I can click on them but... the theme is ignored;
The primary should have a background color like stated in docs;
https://vaadin.com/docs/latest/ds/components/button/#styles
any idea???
This is happening because of how Svelte sets data on custom elements. If a property exists on the element with the same name as the attribute you set, Svelte will set the property instead of the attribute. Otherwise, it will fall back to the attribute. So, the following...
<vaadin-button theme="primary">Primary</vaadin-button>
...gets compiled to something like:
button.theme = "primary";
Normally this works great, especially when setting array and object properties. However, the vaadin-button styles expect the theme attribute to be set, not the property. Because Svelte sets the property instead, the styles don't apply.
:host([theme~="primary"]) {
background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
font-weight: 600;
min-width: calc(var(--lumo-button-size) * 2.5);
}
I would argue that this is a Vaadin bug - if you expose an attribute and a property for the same data, it shouldn't matter which one the consumer sets. Setting the property should have the same effect as setting the attribute. A quick way to fix this would be for vaadin-button to reflect the theme property, so that setting theme also sets the attribute. Here's how to do that in Lit.
However, that change requires the component library authors to implement it. As a consumer of the library, you can also work around this in Svelte by using an action to force Svelte to set the attribute instead.
<script>
import "#vaadin/button";
function setAttributes(node, attributes) {
for (const [attr, value] of Object.entries(attributes))
node.setAttribute(attr, value);
}
</script>
<main>
<vaadin-button use:setAttributes={{ theme: "primary" }}>Primary</vaadin-button>
<vaadin-button>Normal</vaadin-button>
</main>
I wrote an article about this behavior and other workarounds at CSS-Tricks, if you want a more in-depth explanation.
You seem to be importing the Material theme version of the Button component. The "primary" theme variant is only available if you use the default Lumo theme. To import that, use import '#vaadin/button';
For the Material theme, you can use the "outlined" and "contained" theme variants instead: https://cdn.vaadin.com/vaadin-material-styles/1.3.2/demo/buttons.html
I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
I've got a simple styled-components that is being applied to an antd component:
import { Card } from 'antd';
export const UsageCard = styled(Card)`
box-shadow: 1px 1px;
padding: 2px;
`
This creates a div with a class attribute that looks like : "ant-card edit-style__UsageCard-jsklqS hBLsXc ant-card-bordered"
Where .hBLsXc is my styled-component. Unfortunately the padding which is 2px in my styled-componentn gets overriden by the ant-card (0px).
Any idea why this is happening? The styled-components is supposed to come first since it's implemented over the thrid-party component. Is this a problem with the forwarding of className from third-party component I've read on multiple occasion? In any case, I don't really gets how this is supposed to work.
Thanks for your help!
The className has to be put in the Card Component, otherwise this will not work. You should check with antd to see if they did so. It has to look something like this:
const Card = ({ className }) => (
<div className={className}>
...
</div>
)
Here is the documentation for it:
https://www.styled-components.com/docs/basics#styling-any-components
edit:
I checked with antd and it looks like you can pass the className to it. There is a section in https://github.com/ant-design/ant-design/blob/master/components/card/index.tsx:
const classString = classNames(prefixCls, className, {
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-type-${type}`]: !!type,
});
You can pass the className via props. So this should actually work, but the passed className goes first, so I guess the antd styles will always override the styled-components ones, if they are the same. Maybe a fork might help?
I'm trying to use VueStrap in a VueJS project, it looks like webpacker is loading it fine, I can see this in the terminal output, however, when I try use a component from vue-strap I get this error:
[Vue warn]: Property or method "input" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
I tried including the VueStrap as a component in the Vue instance but couldn't get it to work. How do I include the VueStrap into as a component correctly?
Thanks!
This is my application.js:
import Vue from 'vue/dist/vue.js'
import App from '../components/app.vue'
import VueStrap from 'vue-strap'
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('app'))
const app = new Vue({
el: 'app',
template: '<App/>',
components: { App }
})
console.log('app')
})
This is my app.vue file
<template>
<div id='app'>
<p> {{ message }} </p>
<bs-input :value.sync="input" label="Username" help="Only allows lowercase letters and numbers."
error="Insert username" placeholder="Username can't start with a number." pattern="^[a-z][a-z0-9]+$"
:mask="mask" minlength="5" readonly required icon>
</bs-input>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Hello World"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: left;
}
</style>
Please see the documentation on complication scope, notably:
Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.
Your template includes input and mask properties but your data function does not set those up. They need to be set up and reactive so if they change, Vue can pass them down to the child component (which it looks like your bs-input component exposes an input and mask properties).
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result: