I'd like to create a Preact component and let folks consume it, even if they're not building Preact apps.
Example: I'd like to build a <MyTooltip> component in Preact, bundle it (along with the Preact runtime), and have folks load it as a script tag use it purely declaratively, perhaps like:
<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">
<my-tooltip content="Tooltip content">Hover here</my-tooltip>
Is there a way to bundle up a component such that it includes the Preact runtime, my library code, and hooks into <my-tooltip> elements?
In other words, can I interop my Preact components as Custom Elements, similar to ReactiveElements?
There's a great library that does this for you called preact-custom-element:
https://github.com/bspaulding/preact-custom-element
class SearchBox extends Component {
render() {
// ...
}
}
registerComponent(SearchBox, 'search-box');
Even though #Jason Miller`s answer helped me a lot, I still had difficulties in producing a basic working example, so here is how I solved this problem from start to finish:
My basic html document including the bundled script dummy.js containing the actual code of my dummy webcomponent:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<script async src="./dummy.js" type="text/javascript"></script>
<dummy-view name="Test"></dummy-view>
</div>
</body>
</html>
My dummy webcomponent:
import {div} from '../utils/hyperscript';
import registerCustomElement from 'preact-custom-element';
const DummyView = ({ name = "World" }) => (
div({}, `Hello, ${name}!`)
);
registerCustomElement(DummyView, "dummy-view", ["name"]);
My webpack config:
const path = require('path');
module.exports = {
entry: {
dummy: './lib/dummy/dummy-view.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
output: {
path: path.resolve(__dirname, 'webcomponent/')
}
};
Some more details:
I installed the preact-custom-element like so npm i preact-custom-element.
Bundling is done using webpack like so: npx webpack.
The index.html will be served under /webcomponent (e.g. http://localhost:3000/webcomponent/).
When visiting the above URL in the browser, the result will look like this:
<div>Hello, Test!</div>
Addendum:
Since I'm using preact I found an alternative approach using preact-habitat, which does something very similar: https://github.com/zouhir/preact-habitat
PreactJS themselves have a library to do just that
https://github.com/preactjs/preact-custom-element
In case you don't want to use another library to keep it slim you can do:
import {h} from "preact";
h("lottie-player", {
src: "/lf30_editor_mjfhn8gt.json",
background: "transparent",
speed: 1,
style: {
width: 300,
height: 300,
},
loop: true,
autoplay: true,
})
I wrote an article on achieving just this:
https://www.jameshill.dev/articles/custom-elements-with-preact/
In addition to other packages mentioned already, there's also:
https://github.com/jahilldev/preactement
It works in a similar way, but allows you to dynamically import your component files when needed, reducing your upfront javascript:
import { define } from 'preactement';
define('my-tooltip', () => import('./myTooltip'));
Disclosure: I'm the author :)
Related
I created a sample project to reproduce this issue: https://github.com/splanard/vue3-vite-web-components
I initialized a vue3 project using npm init vue#latest, as recommanded in the official documentation.
Then I installed Scale, a stencil-built web components library. (I have the exact same issue with the internal design system of my company, so I searched for public stencil-built libraries to reproduce the issue.)
I configured the following in main.ts:
import '#telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '#telekom/scale-components-neutral/loader';
const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-')
applyPolyfills().then(() => {
defineCustomElements(window);
});
And the same isCustomElement function in vite.config.js:
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-')
}
}
})]
// ...
})
I inserted a simple button in my view (TestView.vue), then run npm run dev.
When opening my test page (/test) containing the web component, I have an error in my web browser's console:
failed to load module "http://localhost:3000/node_modules/.vite/deps/scale-button_14.entry.js?import" because of disallowed MIME type " "
As it's the case with both Scale and my company's design system, I'm pretty sure it's reproducible with any stencil-based components library.
Edit
It appears that node_modules/.vite is the directory where Vite's dependency pre-bundling feature caches things. And the script scale-button_14.entry.js the browser fails to load doesn't exist at all in node_modules/.vite/deps. So the issue might be linked to this "dependency pre-bundling" feature: somehow, could it not detect the components from the library loader?
Edit 2
I just found out there is an issue in Stencil repository mentioning that dynamic imports do not work with modern built tools like Vite. This issue has been closed 7 days ago (lucky me!), and version 2.16.0 of Stencil is supposed to fix this. We shall see.
For the time being, dropping the lazy loading and loading all the components at once through a plain old script tag in the HTML template seems to be an acceptable workaround.
<link rel="stylesheet" href="node_modules/#telekom/scale-components/dist/scale-components/scale-components.css">
<script type="module" src="node_modules/#telekom/scale-components/dist/scale-components/scale-components.esm.js"></script>
However, I can't get vite pre-bundling feature to ignore these imports. I configured optimizeDeps.exclude in vite.config.js but I still get massive warnings from vite when I run npm run dev:
export default defineConfig({
optimizeDeps: {
exclude: [
// I tried pretty much everything here: no way to force vite pre-bundling to ignore it...
'scale-components-neutral'
'#telekom/scale-components-neutral'
'#telekom/scale-components-neutral/**/*'
'#telekom/scale-components-neutral/**/*.js'
'node_modules/#telekom/scale-components-neutral/**/*.js'
],
},
// ...
});
This issue has been fixed by Stencil in version 2.16.
Upgrading Stencil to 2.16.1 in the components library dependency and rebuilding it with the experimentalImportInjection flag solved the problem.
Then, I can import it following the official documentation:
main.ts
import '#telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '#telekom/scale-components-neutral/loader';
const app = createApp(App);
applyPolyfills().then(() => {
defineCustomElements(window);
});
And configure the custom elements in vite config:
vite.config.js
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-')
}
}
})]
// ...
})
I did not configure main.ts
stencil.js version is 2.12.1，tsconfig.json add new config option in stencil:
{
"compilerOptions": {
...
"skipLibCheck": true,
...
}
}
add new config option in webpack.config.js :
vue 3 document
...
module: {
rules:[
...
{
test: /\.vue$/,
use: {
loader: "vue-loader",
options: {
compilerOptions: {
isCustomElement: tag => tag.includes("-")
}
}
}
}
...
]
}
...
I am using VuePress version:
"devDependencies": {
"vuepress": "^2.0.0-beta.26"
}
and I can't add a simple .vue component to my .md page.
My Github LINK
Tried out the other solutions here, but nothing seems to help:
Solution1
Solution2
I was following the guide from the official VuePress documentation about components. But all I get is a zero size component (no content shown)
Would really appreciate any solutions.
EDIT:
to make it a bit simpler than to check my github. The whole project contains anyway only 2 files.
So what I did, is to make a new component.vue file in .vuepress/components:
<template>
<h1>Hello from my test component</h1>
</template>
<script>
export default {}
</script>
<style></style>
and am trying to add it in my README.md file:
# Hello VuePress
### test component
<TestComponent />
<kebab-case-test-component />
Screenshot for my folder tree:
From the VuePress 1.x to 2.x migration docs:
.vuepress/components/
Files in this directory will not be registered as Vue components automatically.
You need to use #vuepress/plugin-register-components, or register your components manually in .vuepress/clientAppEnhance.{js,ts}.
To configure auto component registration:
Install the #vuepress/plugin-register-components plugin:
npm i -D #vuepress/plugin-register-components#next
Add .vuepress/config.js with the following contents:
const { path } = require('#vuepress/utils')
module.exports = {
plugins: [
[
'#vuepress/register-components',
{
componentsDir: path.resolve(__dirname, './components'),
},
],
],
}
demo
I am currently struggling with this. In my Symfony project I have a _variables.scss file, where I keep my global variables (e.g. colors).
This is included in my main scss file like this #import "variables"; - which works fine. Now I also use VueJs in my project and I would like to use my global variables inside Vue components. Now one way to achieve this is just importing the variables.scss itself:
//CustomButton.vue
<template>
...
</template>
<script>
export default {
name: "CustomButton"
}
</script>
<style lang="scss" scoped>
#import "../../scss/_variables.scss";
//able to use variables here
</style>
However with a growing project and different paths, this seems to be unnecessary work. What I'd like to achieve is to load the variables.scss into every Vue component automatically.
This is quite well explained here: [css-tricks.com - How to Import a Sass File into Every Vue Component in an App][1]
Sadly this does not work in my case (I think the vue.config.js is ignored completly) - the variables are still not usable inside the Vue component. I also tried to add the JavaScript into my main js file - where I load Vue - however this seems to break stuff (some module exception).
Is there any specific way to achieve this with symfony?
PS: I am using Symfony 5, Sass-Loader 9.0.1, Vue 2.6.12, Vue-Loader 15, Vue-Template-Compiler 2.6.12
[1]: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
Solution 1:
//webpack.config.js
.enableSassLoader(options => {
options.additionalData = `
#import "./assets/scss/_variables.scss"; //path.resolve is not working in my case to import the absolute path
`
})
```
Webpack config:
module.exports = {
...
module: {
rules: [
{
test: /\.scss$/,
use: [
process.env.NODE_ENV !== 'production'
? 'vue-style-loader'
: MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
data: `
#import "functions";
#import "variables";
#import "mixins";
`,
includePaths: [
path.resolve(__dirname, "../asset/scss/framework")
]
}
}
]
},
]
}
this config imports 3 files: "_functions.scss", "_variables.scss", "_mixins.scss" from folder"../asset/scss/framework" and no need to use #import "../../scss/_variables.scss"; every time in your vue components. Maybe, you will adapt this webpack config to your needs or will get some idea to resolve your issue.
This is what you need c:
Since you are using Encore, modify your webpack.config.js, add this code
var Encore = require('#symfony/webpack-encore');
Encore.configureLoaderRule('scss', (loaderRule) => {
loaderRule.oneOf.forEach((rule) => {
rule.use.push({
loader: 'sass-resources-loader',
options: {
resources: [
// Change this url to your _variables.scss path
path.resolve(__dirname, './assets/app/styles/_vars.scss'),
]
},
})
})
})
You also are going to have to install sass-resources-loader
npm install sass-resources-loader
Then compile your code again and your sass variables will be available everywhere
Solution to my question:
//webpack.config.js
.enableSassLoader(options => {
options.additionalData = `
#import "./assets/scss/_variables.scss"; //path.resolve is not working in my case to import the absolute path
`
})
this will import the file in every sass template + vue component
Is it possible to load a vue component dynamically at runtime (in an electron app to build a plugin system)?
The component is in a specific file
Its path is only known at runtime
The component can either be precompiled (if that is possible, don't know) or is compiled at runtime
A simple example component is listed below
I tried the following approaches, both failing:
Require component
<template>
<component :is="currentComp"></component>
</template>
<script>
...
methods: {
loadComponent(path) {
const dynComp = eval('require(path)'); // use eval to prevent webpackresolving the require
this.currentComp = dynComp;
}
},
...
</script>
The import works, but the line this.currentComp = dynComp; Fails with error message:
Error in data(): "Error: An object could not be cloned."
Using the code presented here, but replace url with a local path
Fails with error message:
Failed to resolve async component: function MyComponent() {
return externalComponent('/path/to/Component.vue');
}
Reason: TypeError: Chaining cycle detected for promise #<Promise>
The used example component is the following:
// Example component
module.exports = {
template: `
<div>
<input v-model="value"/>
<button #click="clear">Clear</button>
<div>{{ value }}</div>
</div>`,
name: 'Example',
data() {
return {
value: '',
};
},
watch: {
value(value) {
console.log('change!');
},
},
methods: {
clear() {
this.value = '';
},
},
};
I found a solution:
Create the vue component as a SFC in a separate file (here src/Component.vue). I didn't try, but probably it works for inline components, too.
Precompile the component using vue-cli-service, which is already a dev dependency, if the project is created using vue-cli (It's nice to use vue-cli here, since the required loaders are already included):
yarn vue-cli-service build --target lib src/Command.vue
The component is compiled to different bundle types in the dist directory. The file [filename].umd.min.js can be imported now.
Import the component dynamically at runtime:
let MyComponent = eval(`require('/absolute/path/to/[filename].umd.min.js')`);
Vue.component('MyComponent', MyComponent);
The require is wrapped inside an eval to prevent webpack of trying to include the import in its bundle and transforming the require into a webpack__require.
(Optional) If the SFC component contains a <style>...</style> tag, the resulting css is compiled to a separate file. The css can be inlined in the js file by adding the following lines to the vue.config.js in the components project root:
module.exports = {
...
css: {
extract: false,
},
};
You can probably look into async loading:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
and see this for a webpack lazy load example:
https://vuedose.tips/dynamic-imports-in-vue-js-for-better-performance/#the-meat%3A
These are just some things I would research for your requirements.
My project is currently Vuejs which use BootstrapVue components (seems to use bootstrap 4 css).
I am trying to use Tailwind css for new custom components.
Is it possible to use both of them at same time?
Thank you.
You can solve classes conflict using a prefix
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
BUT, most likely you will have a problem with normalize.css, which used in #tailwind base
Possible, Yes. Is it recommended, NO.
There are many classes that are gonna contradict with
each other e.g.
.container (Bootstrap)
.container (Tailwind)
.clearfix (B)
.clearfix (T)
And the list goes on...
My advice would be to either stick with BootstrapVue or Tailwind. My personal preference, Tailwind.
Option 1: Adopt or recreate classes
If you only need one or two classes, for example from the color system of Tailwind, you could also copy them.
Some characters would have to be masked, e.g:
// style.css
.hover\:text-blue-900:hover,
.text-blue-900 {
color: #183f6d;
}
That's what I did at the beginning of a project, where bootstrap is the main framework.
If it should be several colors and functions, you can also build this with SCSS quickly. In the long run, however, in my opinion, not the best and cleanest solution.
Example for this:
// style.scss
(...)
#each $name, $hexcode in $tailwind-colors {
.hover\:text-#{$name}:hover,
.text-#{$name} {
color: $hexcode
}
}
}
Full code (Github Gist)
Option 2: Integrate Tailwind
But as soon as more functionalities should be added, or you want to build it cleaner, you can do here with the prefix mentioned by the documentation as Ostap Brehin says.
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
The normalized definitions can be removed by disabling preflight:
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
Better check the generated CSS file.
Here is my full tailwind.config.js file:
// tailwind.config.js
module.exports = {
content: [
'./**/*.php',
'../Resources/**/*.{html,js}',
],
safelist: [
'tw-bg-blue-800/75',
{
pattern: /(bg|text)-(blue)-(800)/,
variants: ['hover'],
},
],
prefix: 'tw-',
theme: {
extend: {},
},
corePlugins: {
preflight: false,
},
plugins: [],
}
Yes, you can use Tailwind and Bootstrap together.
However, you need to do some configuration to your tailwind. The first thing is to add a prefix and then turn off the preflight. And if you are not using Tailwind JIT then also make the important as true. If you are using Tailwind JIT then you can use "!" before the class to make it important. For example "!tw-block".
Here is a suitable configuration for Tailwind JIT/CDN:
<script>
tailwind.config = {
prefix: "tw-",
corePlugins: {
preflight: false,
}
}
</script>
If you are not using CDN, use this configuration:
module.exports = {
content: ["./**/*.html"],
prefix: "tw-",
important: true,
corePlugins: {
preflight: false,
}
}
I have written a whole blog on it: https://developerwings.com/tailwind-and-bootstrap-together/
As long as there's no name collision in 2 libs (which I don't think they are), they will work just fine.
But I don't think you should. Because it will break the unification of the project and will make it harder to maintain.