React JS system for creating template components - javascript

I would need to create a structure in the src directory with the possibility of displaying an individual component for a specific user. For example, there would be a MyComponent component. By default, this component would be used, but I would need a solution to best set up a different body for this component for a particular user.
The default components could have the path src/components/MyComponent
and another component for users with the path src/themes/user1/components/MyComponent
If the path to the component did not exist in the themes directory, the default would be used, and if it existed, the component from themes would be used.
Can you think of a solution to this idea? So far, dynamic importing has been considered, but it is probably not the ideal solution. Thank you

Related

Ways to plug new React Components automatically aka "pluggable extensions"

I am looking for design ideas and/or solution examples on how to achieve following:
There is React app (client-server) with a component store (Reflux-based) that holds React ref. to registered components and metadata that is used in app to incorporate them by React(e.g. consider as plugglable widgets).
I am looking the way how to load modules or get registered newly installed packages "extension" (e.g. #myapp/extensionA) in the main app start w/o precise listing them anywhere and populate component store index, say, "extension" has config.json holding all metadata necessary for registration/load.
Thank you

How to make component tags start with a prefix in Vue?

I am working on a project that I inherited from someone else, and I see a lot of <p-xxxx> tags, such as <p-page :has-something="val1" :has-another="val2" />, etc.(e.g. CompName -->
I'm looking around the directories and found a component called Page.vue that has such props in it: has-something and has-another. And structurally speaking, I'm sure the <p-page> corresponds to this component.
So how did this work? I checked the component's name field and it says Page.
EDIT:
I should also note that the component isn't registered at all. It's not imported either. I'm guessing it has something to do with
import '#/globals';
import '#/plugins';
in main.js, because I know we're using our proprietary UI component library. Can anyone point to where I can go read more about how this works? I thought I was pretty good at Vue, but apparently not good enough.
It depends on how the component is registered in the parent component, for instance, if the Page component is registered as:
components: {
PPage: Page
}
Then in the template, you'll refer to this component as <p-page ...
I figured it out.
In our proprietary library we're using, components were being exported out with p- as a prefix, and the library was injected into the whole app via vue.config.js, so there wasn't any importing in individual components.

How do I access a component's HTML outside an Angular v6 app?

I have created a component outside app using the Angular CLI (in src folder)
../src> ng g c test
And added the component import in app-modules.ts
I'm not able to access the test.html file separately (I want to execute the code in the ngOnInit method of test.ts) as below
http://localhost:4200/<<context_path>>/test.html
I even created HTML and a JavaScript file and tried to access, however that didn't work.
Kindly let me know is it possible to access the HTML?
Thanks for the response. Below the screenshot
Application screenshot
i want to access like http://localhost:4200/test.html
this called bad approach you shouldn't create components out of src folder i don't mean by that is not gonna work but not recommended to do that src folder excite to gather all your project component to make it easy to access and sharing the data between them.
alternative solution 1: you can delete the component you made out of src folder and recreate another one in app folder or simply move the component files/folder in the app that's the correct approach.
then you can access to it from any other component in your app by import it in ts file
alternative solution 2: if you want just to sharing data or executing method/function that maybe shared by two components that holds some data you can use services or event binding.
alternative solution 3: if your problem with routes and you want to naviagte to this test.html for recommended approach firstly move it inside the app folder like alternative solution 1 then use routes and it's config to create a route for this component.
notice: you couldn't inject only html file inside angular components it must has his own ts file that holds the component config #Component({...}) that's how angular knows that's component excite and how to inject it to other components.

Override ember component template with template from addon (in-repo)

I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!
You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.

How are multiple Components implemented?

I want to separate out the logic of my app which needs to call an OData service before the main execution can continue. I have other apps which need this behaviour implemented in the future, so if I can modularise that functionality into a component, it would be very useful.
I have Component.js for the main app, and I'd like to add a second component to be run first, which then loads the main component once the OData result has been received.
How do I load a Component, then get that Component to run the next one (in this case a UIComponent)?
It seems the sap.ui.component code automatically appends "Component.js' to the end of the name provided, so how do you have different Component files with different names?
var oComponent = sap.ui.component({
name: "MYAPP.Component2",
id: "componentId"
});
Returns error,
failed to load 'MYAPP/Component2/Component.js' from ./Component2/Component.js: 404 - NOT FOUND
Could anyone provide some example code of a UIComponent having a dependency of a Component, and the file structure of that part of the application?
You can build multiple components as separate entities and then have them listed as dependent components inside a master component for your project. In your main or master component you can list these secondary components under the metadata config's dependencies array. Each component is atomic to itself so each will have its own Component.js with routes and view path. We create nested components in this same manner and it works really well.

Categories