Right now I am working with Rocket.Chat and I need to make my own custom pages and CSS. I copied my rocketchat:ui package and renamed it to be childtheme:ui and changed the name of my package in my package.js file to match my package name. However, when I edit a page it still loads the original Rocket.Chat UI. I'm not exactly sure how I can do this, but I'd like to load my UI after the original UI is loaded. A Rocket.Chat developer told me to add a reference in one of my files: Package.use()
I don't know exactly where I can declare this reference or if this is even the best way to load my custom UI, but if anyone has experience I'd appreciate it! Thank you!
Are you sure it's Package.use() and not Package.onUse() ?
If your custom package is a copy of rocketchat:ui package, you should already have it.
Do your have your package declared in .meteor/packages ?
Related
I am trying to add Tailwind CSS to my existing project. For now it's only a simple project with a log-in function, but before I implement the backend and database, I want to style it. I've followed the instructions here: https://tailwindcss.com/docs/installation, but i know I'm missing something, but don't know what.
Setup-picture
Does someone have a clue?
I'm a complete beginner in ReactJS. I'm currently designing a website using it and currently working through localhost.
My main page is on localhost:3000 and I want to navigate to localhost:3000\University(I have designed a separate file University.js for this).
On navigating to the content of this file, it overlaps with the existing content (ie that of localhost:3000). Is there any way to show the new content without overlapping as well as with separate CSS. Any help would be really appreciated.
Actually, I'm not getting what you mean by "overlapping content"! For the css part maybe you are looking for something like "local stylesheets" aka "css modules".
This answer has an example of using local stylesheet for each component. Also, there are various libraries, as mentioned in this post, which can come handy for you.
Go through this article, and pay attention at method 4 there. CSS modules is one of the best solutions in case you are experiencing CSS overlapping.
PS: react-native and react-js are two different tags!
You can understand react routing here, if you have some doubt over it. (Mentioning this because of tag!)
My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each section).
The CMS distribution currently includes a bundled version of the javascript needed to run the web app, but not the original TSX files.
Now, we would like to make it possible to the developers using our CMS to extend the web app by
1) Injecting additional sections into the UI using a "slot-fill" approach
2) Possibly even overriding the existing sections rendering a different component in the same place.
<div>
<SidebarComponent />
<Section1Component />
<Section2Component />
// How to inject a possible PluginComponent here?
</div>
From the research we've conducted so far, there seem to be no "official" way to do this, so I'm wondering what would be the best approach in this case.
I am facing the same issue where I need a component from a plugin to interact with a component from another plugin with a hook system. I have a created a small codesanbox with the same approach adapted to your need.
Basically the approach is to create a injectedComponents.js at the root of your plugin that specifies in which plugin and area your component needs to be injected.
Here is ademo
single-spa has some good options in order to achieve this.
Please see if it can be help for you.
Microfrontends
Parcels
I am late to this but
Just create a utility class with registry function, and register each component to the registry (just dictionary of key value pair, where key is a constant and Value is the component). T
Then when you display a component in your base app, get it from the registry using a key. Then once you publish this whole base app as package ( make sure to export the utility registry). A user can register a component with the same name and override the default component.
For communication between totally independant components, you can use and EventEmitter
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.
I am Releasing new upgrade for manage package but in component list (those are going to release) containing objects/Apex classes/Pages from another app also. The another app which included in release is not referred anywhere, I have checked dependencies also but still it taking all components from another app and I cannot even remove that.
Any idea?
Thanks in advance.