i'm using svelte for my new project and pretty new to it. I have a parent component with multiple child components.
on child component allows me to select a date, and then i want to re render automatically all other child components using this date.
Actually, they won't rerender, unless i use a store, but is there another way ?
You can use a two way binding by using bind:, but I think it should be used only in special cases. You can really mess a data flow with it. The store is usually much better choice. Anyway here is the code:
<script>
import Child1 from "./Child1.svelte"
import Child2 from "./Child2.svelte"
let info = 'Hello from main';
</script>
<h1>Main</h1>
<Child1 bind:text={info}></Child1>
<Child2 msg={info}></Child2>
Working example:
https://svelte.dev/repl/51daf11dcf3a4ade9b3ed525eec51967?version=3.24.1
There is also other ways to do this, for example: createEventDispatcher
Related
I have been trying to create some components using litelement. Is there any way to prevent importing every component and import dynamically only required components
Lit elements are JavaScript classes and don't require any global framework state, so they can be code split and executed with whatever build system you have in place.
For example, you can import and define elements dynamically using a dynamic import (or any other lazy code fetch/execution mechanism you can use in JavaScript).
See a simple example: https://lit.dev/playground/#gist=b55407e8ebbf88a9b8cab11a259539a8
Breaking down the example. The code containing the <simple-greeting> litelement is contained in simple-greeting.js. This is loaded using a dynamic import on the press of a button with the following code:
document.querySelector('button').addEventListener('click', () => {
// On button press load the component definition and define
// on custom element registry.
import('./simple-greeting.js');
});
Now the component's code won't be loaded and the element will not be defined until the programmatic dynamic import has happened.
The browser natively handles upgrading the custom elements on the page when they are defined on the custom element registry.
I am testing an Electron/React app using Spectron, which uses the WebdriverIO commands API. I would like to test the attributes on some components, but I want to be sure I am testing them only after the component has reloaded.
The normal WebDriverIO wait commands like waitForText() or waitForExist(), wait for some change, but I need to wait until a component redraw has occurred. For example the component will already exist or will already have some text before it is redrawn. This means any test on the text will occur before the redraw, and I won't be testing the new text. Is there a general way to wait for a redraw?
You can use the custom 'waitUntil' command to wait for just about anything. You'd need to figure out what you're waiting for, or how to tell that the component has been redrawn, but it should be possible.
Is there a class name you can tag in to?
Also, the 'waitFor' commands do take negation flags, allowing you to wait for an element to stop existing or stop having text. That might be useful.
Another solution, to this specific question on waiting for changing text, is to use an XPath selector. The XPath language treats an HTML page like a tree, but text, amongst other things, is also a separate node in that tree. Unlike a CSS selector, you can easily select an element based on it's inner text. See this article.
So if my XPath selector uses a text 'predicate', then I can use a standard waitForExist command from the webdriver API.
For example, say my p element, after the redraw, should have the text 'Burgers'. It did exist before the redraw but it had some other text. To only select it when it has the new next:
const selector = '//*p[text()="Burgers"]';
browser.waitForExist(selector);
I am new to web programming and of course to YUI.
I tried using the overlay, chart and node-menunav.
Wanted to know if there is any option of creating these widgets using dynamic data coming in JSON format and updating the widgets as the new data comes in?
For us all the properties will come in JSON data from server and then using that data we need to render menubars, charts, property browser. Now i am not finding how to proceed with this requirement.
Thanks.
There is no default way of syncing widgets via Ajax. The only widget that comes by default with ways of updating its data is the DataTable widget. For the rest, and even for DataTable's attributes, you need to do it yourself.
However, if the data and widgets are complicated enough, you should consider using the YUI App Framework. The combination of Models and Views will help you a lot for creating complex layouts with widgets. Model will give you a way to link attributes to a JSON backend easily, specially if you're using a RESTful API endpoint. And View will give you tools for setting up the markup and reacting to events.
The Model's load and change events will let you know when the data updates. So in your view you'll be able to react to these events and set the corresponding attributes in your widgets:
var MyView = Y.Base.create('myView', Y.View, [], {
initializer: function () {
this.get('model').on('change', this._updateWidgets, this);
},
_updateWidgets: function () {
var model = this.get('model');
this.someWidget.set('someAttr', mode.get('someAttr'));
}
});
But as I said there is no right way of doing this. You can use whatever technique you like. The App framework is just a set of basic components that you can use to structure you application. It's designed for flexibility so it can accommodate many ways of using it. Other ways could use IO directly or use DataSources combined with Widget Plugins. This is a question with many correct answers.
This is a noobish question but I am getting started with MS Coded UI Tests. And I was wondering if there's a way to find page elements using XPath, instead of the default matching mechanism? What I want to do, is match a parent elements and programmatically navigate down the DOM tree to get the elements I want to work with. This can be easily done with Selenium, but I am not sure how to do it with Coded UI Tests.
Thanks
You should be able to manage navigating an xpath using the UITestControlCollection. Use CodedUI's recorder to get to the top level control, then use GetChildren to navigate your way. Keep in mind that the xpath changes because all the object types are similar, CodedUI's API doesn't distinguish.
Example:
HtmlDocument doc = this.UIYourWindowName.UIYourDocumentName; // mapped control
doc.Find();
UITestControl toline = new UITestControl(doc);
toline.SearchProperties["Id"] = "to_d"; // use the id of the top most control
UITestControlCollection toline1 = toline.GetChildren(); // get the child objects
toline1 = toline1[0].GetChildren(); // xpath: \\ctrl[#id='to_d']\item[0]
toline1 = toline1[0].GetChildren(); // ctrl[]\item[0]\item[0]
// and so on...
I am using the WebBrowser control in my project to display complex HTML documents that are generated/manipulated at runtime.
I have noticed that constructing the DOM programmatically from C# by creating HtmlElement objects is about 3x slower than generating an HTML string and passing it to the WebBrowser, which in turn parses it to generate the DOM. Both ways create a noticeable delay when navigating between lengthy documents.
I am looking for the fastest way to switch between multiple documents in the same WebBrowser control, ideally without having to repeatedly generating the DOM tree for each document. Is it possible to cache a tree of HtmlElement objects somewhere in my program, and then re-insert them into the WebBrowser as needed?
I will describe the solution in terms of the native win32 COM APIs; it shouldn't be too difficult to write the interop to do it in C# (or find it at pinvoke.net). Alternatively, you may need to use the properites that the managed objects expose to get the native ones.
You're not likely to be able to build the DOM yourself faster than IE's parser, so create a blank HTMLDocument (which in native code would be CoCreateInstance(CLSID_HTMLDocument)) and QueryInterface() the HTMLDocument for its IMarkupServices implementation. Also create two IMarkupPointers using the IMarkupServices::CreateMarkupPointer() method.
Next call IMarkupServices::ParseString() to parse your HTML. This will give you a pointer to an IMarkupContainer that contains your DOM, as will as two IMarkupPointers that point to the beginning and end of you DOM. Now you can use IMarkupServices::Move() to move your data from one IMarkupContainer to another.
So the general scheme you would use is to have a single HTMLDocument which is your "display" document, and it's associated IMarkupContainer (which you can just QueryInterface() for). Then you have a vector or list or whatever of all the non-displaying markup containers. Then you just create a markup pointer for your display doc, call IMarkupPointer::MoveToContainer(displayDocumentContainer, true) and then use that to move stuff around from your display container to the not-displaying containers and vice-versa.
One thing to note: you must only access these objects on the thread you create them from, or acquire them on. All IE objects are STA objects. If you need multi-threaded access, you must marshal.
If you have specific follow up questions, let me know.
References:
IMarkupContainer
IMarkupServices
Introduction to Markup Services
This will do it
// On screen webbrowser control
webBrowserControl.Navigate("about:blank");
webBrowserControl.Document.Write("<div id=\"div1\">This will change</div>");
var elementToReplace = webBrowserControl.Document.GetElementById("div1");
var nodeToReplace = elementToReplace.DomElement as mshtml.IHTMLDOMNode;
// In memory webbrowser control to load fragement into
// It needs this base object as it is a COM control
var webBrowserFragement = new WebBrowser();
webBrowserFragement.Navigate("about:blank");
webBrowserFragement.Document.Write("<div id=\"div1\">Hello World!</div>");
var elementReplacement = webBrowserFragement.Document.GetElementById("div1");
var nodeReplacement = elementReplacement.DomElement as mshtml.IHTMLDOMNode;
// The magic happens here!
nodeToReplace.replaceNode(nodeReplacement);
I'd really need to know more about how you are generating these documents. It might be faster to get your data into a XML document and then use a XSL transform to convert the data to HTML and pass that to the WebBrowser control.
The nice thing about the XSLT implementation of .NET is that it takes the XSL source and compiles it to a temporary assembly to speed up the transforms.
If you decide to go that route look up the MVP.XML project which adds some nice exslt functionality to the stock XSLT implementation.
Maybe rather than caching the DOM you could just flip between several WebBrowser controls on the form - with only the active one being visible?
Could you do something like this?
Create the contents you want to display inside a DIV
Create secondary contents (in the background) inside non-visible DIVs
Swap the contents by playing with the visibility