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.
Related
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
What is the difference between Dynamic Component Loader and Lazy Loading? I need to build an application that needs to have an <router-outlet> at the root of the application. My Problem is that I don't know how to implement a Component that renders Child-Components according to data, dynamically. My current approach builds up on Dynamic Component Loader, but using this technique I have issues concerning tracking my location, navigate back, etc.
Is there any best practice for using "multiple <router-outlets>" (e.g. Lazy Loading)?
Thanks!
Loading components dynamically is not related to Lazy Loading.
Lazy Loading is a way to split up your application into modules that are loaded lazily (in the background) instead of loading your entire application at the start. This helps your app load more quickly so the first page is rendered sooner than it would if you did not use lazy loading.
For example, you might have a settings menu which loads various settings, but you don't expect users to visit that menu very often, so you put all the components for settings into a module and then you set that module to be loaded lazily (in other words none of that code needs to be downloaded unless a user actually visits the /settings route).
All angular applications must have a <router-outlet> at the base component (usually AppComponent). This is a requirement of all Angular applications.
You may want to consider also using auxiliary routes - these are optional, and allow you to load components in different 'places'. You can read about them here
Alternatively you can (for simple cases) just use ngIf, like this:
/app.component.html
<div *ngIf="isOption1(); else Option2">
<my-option1-component></my-option1-component>
</div>
<ng-template #Option2>
<my-option2-component></my-option2-component>
</ng-template>
/app.component.ts
public isOption1: boolean {
return <some test that returns true or false>;
}
So based on the logic the method isOption1 returns, the user will see either Option1 component (when true) or the Option2 component (when false).
I know we should use unit tests for our reactjs components. But what I also want, is some way to manually test our components in isolation. Because we are working on small sprints in which we must deliver some finished component before having the page that first uses that component. And I want to see that full component really working (i.e. test integration with css and sub-components).
So to start with, I would like to see that new component rendered in black page that doesn't require that component directly, but to take that component name/path from a query-string parameter. And then I plan to add to that page some generic component configuration (e.g. a textbox with json representing the props to pass to that component).
The first problem I'm facing now is about how to configure webpack, webpack-dev-middleware, or webpack-dev-server to be able to load a component passed by parameter.
Anyone know how to that? Or a better way to handle this?
I would try something like this:
Set up an entry point that uses require.context.
Invoke require within that context based on your querystring. You should have you React component now. Render that through React.
In order to generate the test controls I would include the meta within the component using JSON Schema. The form controls could be then generated using some form generator such as plexus-form or tcomb-form.
I'm currently building a custom control to be used as an application's view navigator (classic OneUI style). First of all: this is a 8.5.3 based project, and unfortunately there's no way to use Extlib stuff or other extensions / plug-ins. So we have to build all the tricky stuff ourselves using only what came "out-of-the-box" with 8.5.3.
I'd llike to build my navigator using a repeat control containing <xp:link> controls. Datasource could be an array of javascript objects where each single object would look like this:
var navEntry = {"entryLabel" : "label-of-link",
"entryTarget" : "target-url-of-link",
"entryStyle" : "style-to-emphasize-selected-link"}
Each array element then would describe a single navigator entry.
Since the navigator will be used in all possible "DominoView" Xpages it yould make sense to build the array of JS objects at the Xpage level and then pass that info into the custom control.
I'm aware that there are multiple ways to do this, and one could be "Custom Control Properties". If there was a way to pass my JS object array.
(Hope I could make clear what I'm trying to do here...)
That object looks like a HashMap to me really. You should be able to pass that in to a custom control via custom property if you use the type java.util.HashMap I'd think. You'll need to type it in I'm sure. I've passed custom objects in by using java.lang.Object.
The custom control will get loaded during the Page Load event, and usually properties have to be available at that point. If they're loaded during the Render Response phase, that's too late. So your SSJS object will need to be Compute on Page Load.
To use contents of a repeat control, you would need to set repeatControls=true, otherwise the repeat is only built during render response. Until then it's just a single set of controls with no data in them. However, Im pretty sure repeatControls="true" means you only get the number of rows you define. You can't change it via a pager.
You can manually define the type of the custom property. For a standard SSJS Object you use "com.ibm.jscript.std.ObjectObject", for a SSJS Array you use "com.ibm.jscript.std.ArrayObject" etc. As editor for the custom property, I set the string editor ("String value").
I want to create a navigation for Application module as the main navigation containing all module, and a navigation for each others modules containing all controllers of this module.
It will rendered at the last like tabs with subs tabs depending of the active page.
I want to do this with child layout, without inserting $view->layout()->addchild(..) in each action of each controllers of each module.
In each Module's Module.php file you can attach a custom event in the onBootstrap method to set whichever template you wanted:
//Attached in the onBootstrap method of Module.php
public function determineLayoutEvent(\Zend\Mvc\MvcEvent $event) {
$view = new \Zend\View\Model\ViewModel();
$view->setTemplate('custom/custom_layout');
$event->setViewModel($view);
}
I would do something like that^^.
There might be a hiccup or two with the code I've given when appending the actual view from the controller, but this should be a decent start.