I am working with web components using stenciljs. Its great library for creating web components that can we re-use anywhere.I wondered how stencil compiler works. I mean when I create a build of any component its creating multiple folders inside dist and when we have to use the component we just need to add 1 or 2 file like following.(I used bit.dev to upload my component)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module"
src="./node_modules/#bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.esm.js">
</script>
<!-- <script nomodule=""
src="./node_modules/#bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.js">
</script> -->
</head>
<body>
<accordian></accordian>
</body>
</html>
at the same time I tried same component using react but in react they are not creating multiple folder like stencil.
so here are the list of the folder that stencil create is dist folder
cjs
collection
esm
esm-es5
accordian
types
and some index.js files
so my question is what is the use of all this folders. I concerned about this because when I collect all my modules in some micro front end app I don't want this much of folder for all the components.
so if I can understand the use of this I can debug and manage duplicate folders and code in my micro front end app.
any help is appreciated
UPDATE
I have check ionic and its build using stencil so when I make a build of hello word app in ionic and check www folder it contains all the componets's chunck which I have not used in my entire application.. its 3 MB !!!! why ionic import all component event if i am not using it ??
I have tried react its best in this cases.. just one file for each component when I add stencil component in react then same issue multiple files generating for one component for stencil only where else for react just one file :) isn't it so cool ? :)
Related
Got an EpiServer project where I want to insert .vue components.
I have tried to follow this project, where they can render .vue components from their cshtml files dynamically: [https://github.com/episerver/musicfestival-vue-template][1]
Currently approaching the problem by adding the built app and chunk-vendor js files into the project folder of the C# project and inject the scripts and id’s. Unfortunately, the Vue project takes over the whole app container.
The ideal scenario is to simply add vue components (from the Vue 3 Cli project), into the project like: <hello-world></hello-world>, without it interfering with the renderbody.
So, how do I compile .vue components from cshtml files, while renderbody works as usual?
I mean will it only serve the index.html file?But how can a client run that html file because it is not regular html file? and do i need to have a back end node to run it?
Actually i am unable to under stand the whole process.
In general client requests a html file and a server returns that html file to the client.
But in case of react how index.html. Does the server return index.html plus all the components and then it gets rendered by the browser or does it come pre rendered from the server.
You will need a host to put your React application on. This can simply be a place where your files are accessible via HTTP (Amazon S3, Github Pages, a webhosting account, etc). A user then goes to a url, and that host will respond with your HTML file that might look something like this:
<html>
<head>
<title>A title here</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
When the browser loads this html file, it sees that script tag and then loads up the src of that script, making a request for an app.js on your host. app.js may look something like this:
import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return <h1>My App</h1>
}
ReactDOM.render(<App/>, document.getElementById('app'))
The browser then executes that script, which creates the <App/> component, and puts it in the html node with id app, thereby rendering your react app.
No application code is required server side. Everyone gets the same HTML and Javascript, and the HTML the host provides is very basic providing an empty place to render your app, and a link to your React custom code. That's it.
I left out a part for simplicity, which is compilation. You write the javascript code above, but something like babel or webpack will take what you wrote, and load those dependencies (React, ReactDOM) and compile those JSX tags (<h1>, <App/>) into something the browser can understand. This creates (usually) a single large javascript file which is what gets put on your host for the browser to download. It includes React, any other npm libraries you want to use, and your custom application code all in one file.
When you run the build command on your React app, it takes all the imported files (import ... from ...) and bundles them (this is what Webpack does). That index.html file has a script tag that reference to a big js file (that bundled one) with all the code: React, your component, the libs in node_modules, ..., everything. What that big script file is loaded in the browser it handle the whole construction of your app.
I want to use a component created using StencilJS in a regular basic HTML file. I followed these steps:
I have created a stencil component to create the basic my-component example:
npm init stencil
I want to use this component in an HTML file, so I ran
npm run build
I then created an html project with the following structure:
And then I moved the files from the dist folder into the script folder. And I added script tag in the head of my html file that references the component.js file like this:
<script src="script/{component_name}/{component_name}.js"></script>
And I used the component in the html like this:
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
But my component isn't being rendered. I get an error involving a esm.js file. Can someone help me with this process of compiling my stencil component to be using in a basic HTML project?
Stencil bundles your dist into modules and lazy-loads only the required code based on the components you are actually using in your HTML. So you should serve the whole dist folder along with your website.
The recommended way is to have the following two script tags in your html file:
<script type="module" src="/dist/[namespace]/[namespace].esm.js"></script>
<script nomodule src="/dist/[namespace]/[namespace].js"></script>
(where [namespace] is whatever is set in your stencil.config.ts)
This will instruct browsers who support ES Modules to use the esm bundle, and other browsers will use the ES5 (cjs) bundle.
If my-component is the only component that you're using from your library, then only that code will be lazy-loaded by your page. Stencil knows about component interdependencies and how to lazy-load them accordingly.
There is a new experimental output target (called custom-elements-bundle) that allows you to bundle everything into one js file, which will simplify distribution in some cases. It's only available with the new refactored compiler (which is available using the --next flag, after installing #stencil/core#next) (Stencil 2 has been out for a while now).
I was working in vue.js and the component script section has got really big now. I want to store the whole script externally, I believe that should be possible,
if I do <script type="text/javascript" src="js/projects.js"></script>
I get error js/projects.js module cannot be located when js folder is located at the same level as Projects.vue is.
so I have
components/
Publish/
js/
projects.js
Projects.vue
what am I forgetting somehitng or doing it completely wrong...
Do I have to have components/Publish/js file included in some path that webpack is aware to make js file import working ?
New to react and was following a tutorial creating this component. (https://github.com/owenchak/react-weather). I'm using gulp to test everything locally. How do I use my component in an actual website I'm trying to create? I instructed gulp to create a style.css (containing all the sass files), main.js containing the interpretable jsx and index.html that contains all these files.
I have done this before. If you take the bundled js (and) and css and attach it to your html and you've created an element where react will be rendered (e,g <div id="app"></div>) it will work.