- #BASEELEMENTS OR SCRIPT MASTER ZIP#
- #BASEELEMENTS OR SCRIPT MASTER DOWNLOAD#
- #BASEELEMENTS OR SCRIPT MASTER FREE#
Maybe name it after your widget or something like. I'd recommend creating a unique ID instead of using. In my Tailwind config I set important: true so that all of my Tailwind classes apply the !important flag making style conflicts less likely. Any CSS loaded on the same page can accidentally affect your widget. Since this method injects HTML markup, it's possible to get styling conflicts. I used the exact steps above, so that means I included JS that's injecting the weather widget markup into the that I included right after this paragraph.
#BASEELEMENTS OR SCRIPT MASTER ZIP#
It takes in a zip code, converts it to lat/lon coordinates and requests the current weather using the API. Live demoīelow is a simple weather widget that I built with Alpine. const injectCSS = ( ) => " # The commit messageĪny time there is a push or a pull request to master, the project builds and the production assets get copied to the master-built branch. In our /src folder I'll create a new JS file called injectCSS.js.
#BASEELEMENTS OR SCRIPT MASTER DOWNLOAD#
Instead of requiring people who want to embed our widget to include a JS and a CSS file, we can create the our selves and download the CSS we need. We'll want to include a CSS file to style our widget. Add ".min" to any JS/CSS file to get a minified version if it doesn't already exist.For testing, you can omit the version completely to get the latest one - not for production use.I'd access my JS from the CDN by linking to: has some other neat features too: My GitHub username is joseph-farruggio and say my repo name is js-widget which is at version 1.0. You can't load JavaScript files directly from GitHub, but you can pass that JS off to and they'll cache it and serve it for you. The way this works is you include your production JS in your repo. Setup HTML-Loader to allow us to import HTML templatesĪt this point we have a production ready script to share, but how do we go about sharing it? The easiest and quickest thing you can do is push your project up to Github and allow a CDN like to cache and serve your JavaScript for you. Process our app.js file and output it to /dist/app.js We'll have a /dist/app.js file that we can include on any webpage that will inject our little Alpine widget into a. With this you can run npx mix and it will process our Alpine JS and import our widget template file. InitAlpine ( ) Setup HTML Loader and Laravel Mix In app.js we'll import our initAlpine.js file: // app.js #app is a div that we're going to inject our markup intoĭocument. * you would register your component with Alpine like this: * If you're abstracting your component logic into a JS file (imported above), Next we're going to initialize Alpine and target a div to inject our widget: // initAlpine.js continued Import widgetHTML from '././widget.html' If you abstracted your Alpine component logic, you'd import that here
In initAlpine.js I'll import the Alpine NPM package and I'll import my widget.html template: // initAlpine.js I'm going to store all of my JS files in a /src directory and I'll start with creating an app.js and an initAlpine.js. I'm going to create a simple Alpine component with a button that will toggle the visibility of content: In a new project folder create an html file - I'll name mine widget.html. Let's start our project by creating a simple HTML template. Heavily inspired by Vue.js, but much much simpler. Your new, lightweight, JavaScript framework. It will allow us to import HTML templates into our JavaScript.Ī utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.Īn extension to help Laravel Mix process your Tailwind stylesheet.
This Webpack package exports HTML as a string. Here are some of the NPM packages I'm using and what they're for:Īn elegant wrapper for Webpack that makes building assets like CSS and JS dead simple.
#BASEELEMENTS OR SCRIPT MASTER FREE#
Most of my widget projects are built with Tailwind CSS for styling and Alpine.js for data binding and reactivity, but feel free to use what you're comfortable with. By including that JavaScript file on another website we can inject our widget as actual HTML and avoid iFrames.
We'll setup a build process that will create a single JavaScript file that we can distribute over a CDN. What we're going to do is setup a local dev environment and build a simple widget. When you're building JavaScript widgets with the intention of making them sharable so they can be embedded on any website, there's a way to improve the performance and mobile responsiveness of the widget by injecting the widget as HTML and not embedding it as an iFrame.
0 kommentar(er)
