The material-ui "build:es2015" script is building commonjs scripts, not ES2015.
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
etc.
I'm trying to find a way to build an AMD-friendly version of material-ui similar to https://reactjs.org/docs/installation.html#using-a-cdn.
With ES2015 I should be able to compile with typescript into an AMD bundle. The source files look very close to typescript files, but changing the extension to TSX isn't enough...they're not actually typescript files (what are they?).
Also, I tried the "build:umd:dev" doesn't produce anything so nice as https://unpkg.com/react#16.2.0/umd/react.development.js, and they seem incompatible with requirejs.
What are the necessary steps to building a true umd version of material-ui?
Background:
Yes, I know traditional react development process uses webpack but I'm trying to produce a light-weight, CDN-dependent proof-of-concept app that runs from rawgit. I have the react and react-dom parts working but not the material-ui.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<style>
#import url('app.css');
</style>
</head>
<body>
<app/>
<script>
requirejs.config({
// module name mapped to CDN url
paths: {
'react': 'https://unpkg.com/react#16.2.0/umd/react.production.min',
'react-dom': 'https://unpkg.com/react-dom#16.2.0/umd/react-dom.production.min',
'openlayers': 'https://cdnjs.cloudflare.com/ajax/libs/ol3/4.5.0/ol',
},
deps: ['built/index'],
callback: () => require(["index"], go => console.log("app", go()))
});
</script>
</body>
</html>
A UMD build is published for every release.
For example: https://unpkg.com/material-ui#1.0.0-beta.24/umd/
Note: with version 4, the UMD output will be renamed as MaterialUI (previously material-ui). See this pull-request for more information.
Well, I like TypeScript Namespaces for prototyping to and had already created separate UMD distribution with typing for global object extension
Check source code and example app here.
namespace app {
const {
Button,
} = material.core;
const App = () => <Button>Hello, world!</Button>
...
Also I wrote some tools which help you make your app npm-independent includes router, snack provider, state manager, JSON template form generator, fetch provider, date and time pickers.
Amazing project. English translation will be applied soon so a star will be appreciated
Related
In the Nuxt documentation they gave the code example below for dynamic image loading.
<img :src="require(`~/assets/img/${image}.jpg`)" />
However, when I use it I get the following error in the browser console "Require is not defined"
Answering my question as it took me a whole day of searching...
Apparently 'require()' works for Webpack only and doesn't work with Vite.
And as Nuxt3 comes by default with Vite it wasn't working with me.
So to there are 2 options for fixing this issue:
Change from Vite to Webpack.
Use the code below instead of what's described in the Nuxt documentation to import dynamic images.
// in HTML
<img :src="getImageUrl()"/>
// in script
function getImageUrl(name) {
return new URL(`./dir/${name}.png`, import.meta.url).href
}
Useful sources:
https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
https://github.com/nuxt/nuxt/issues/12797
I'm building a Nuxt3 application where I need to import and use a 3rd party node package which internally is using webassembly.
In my case, the package I need is https://github.com/higumachan/lindera-js
Where do I import the package?
In one of my components, right at the beginning of the <script> tag.
And afterwards I'm using it in one of the methods.
(Note: I removed unnecessary code below)
<template>
...
</template>
<script>
import * as lindera from "lindera-js";
...
methods: {
doTranspile() {
const tokenized= lindera.tokenize(this.input);
console.log(tokenized);
},
},
...
</script>
What is the Problem?
After dev server compiles everything and I reload the page in the browser, I get the following error:
[vite] Internal server error: "ESM integration proposal for Wasm" is not supported currently.
Use vite-plugin-wasm or other community plugins to handle this.
Alternatively, you can use .wasm?init or .wasm?url.
See https://vitejs.dev/guide/features.html#webassembly for more details.
The Question
How can I use the package without problems in Nuxt3? Do I have to use vite-plugin-wasm and if so, how and where to use/import it?
Or is there any other way to use a package which is using webassembly?
I found some similar questions on SO, but not sure if they can be used like this in Nuxt3 as I'm fairly new to Nuxt in general.
How to use embedded Webassembly in Vite?
How to include an WASM npm module in svelte with vite?
I started trying out lit-html and lit-elements, playing around with it and now I git in the problem where I cannot find out how to publish such code online. Never worked with Node-js packages on online platforms, only used bits of code from it. Normaly I build plain php/html templates, but I wanna try this.
Build some test cases localy that work. But googled all over the place to find out how i can publish this kind of code online to the internet. I am using a shared hosting with many options like SSH e.g. But can't find out what to do to get this working, it can't be as simple as running npm install on my server right?
the best thing about the new world of web components, and lit-html and friends, is that we don't actually need npm, we don't need compilation, or any build step at all
these days, we can use es-modules to load things straight from a CDN like unpkg or jsdelivr
take a look at the demo on haunted's github readme — this is all you need!
<!doctype html>
<html lang="en">
<my-counter></my-counter>
<script type="module">
import { html } from 'https://unpkg.com/lit-html/lit-html.js';
import { component, useState } from 'https://unpkg.com/haunted/haunted.js';
function Counter() {
const [count, setCount] = useState(0);
return html`
<div id="count">${count}</div>
<button type="button" #click=${() => setCount(count + 1)}>Increment</button>
`;
}
customElements.define('my-counter', component(Counter));
</script>
check it out running live on this codepen example
👋 Chase
Let me clear the context first. I have bought an admin panel template from themeforest and stuck on implementing that with requirejs. The seller does not provide support for implementation.
The theme requires the following JS file, in order to run:
https://altair_html.tzdthemes.com/assets/js/common.js
I have created a fiddle, where I have included the file and defined that with requirejs. But a function (moment) is not being defined. I dont know where I am doing wrong.
Check the fiddle here:
requirejs.config({
paths: {
'common': 'https://altair_html.tzdthemes.com/assets/js/common'
}
});
require(['common'], function (common) {
console.log(moment);
});
http://jsfiddle.net/tareksiddiki/q5kumwvg/
But the moment function loads when we load the external javascript (https://altair_html.tzdthemes.com/assets/js/common.js) within the <script> tag in old school way.
I am experementing a bit with react and browserify and have these wishes:
I want to bundle all code written by me into a single file
I want to bundle all 3rd party dependencies (react, react-router, lodash etc) into separate files, one for each lib, to maximize caching possibilities
I have managed to do the things described above but I ran into this specific situation:
In some places of my code I want to use react with addons and as such require it like this: var React = require('react/addons). I don't do this in all parts of my code and it is not done in 3rd party dependencies such as react-router. This seems to create a conflict. Either the browserified bundle will only be available through var React = require('react/addons) which breaks 3rd party dependencies, or I will have to bundle react both with or without addons which menas that react is bundled and downloaded twice.
I tried to use aliasify and make react an alias for react/addons but I couldn't make it work. Should this be possible?
Another acceptable solution would be to bundle just the addons in a separate bundle and through that make both react and react/addons available through calls to require. Is any of this possible?
Addition
As a comment to the first comment by BrandonTilley, this is not just applicable to React and addons. Lodash also comes with a number of different distributions and I would like to be able to choose the version to use in my webapp in this case as well.
Notice that what you want to achieve is documented here: Browserify partitionning
I'm packaging my app in 2 parts: appLibs.js and app.js.
I've done this for caching too but I choose to put all the code that does not change often in a single bundle instead of splitting it like you want, but you can use the same trick.
Here's the code that might interest you:
var libs = [
"react",
"react/addons", // See why: https://github.com/substack/node-browserify/issues/1161
... other libs
];
gulp.task('browserify-libs', function () {
var b = browserify(...);
libs.forEach(function(lib) {
b.require(lib);
});
return b.bundle().......
});
gulp.task('browserify',['browserify-libs'],function () {
var b = browserify(...);
libs.forEach(function(lib) {
b.external(lib);
});
return b.bundle().......
});
This way, React is only bundled once in appLibs.js and can be required inside app.js using both react and react/addons
If you really want to bundle your libs in separate files, bundle then with b.require("myLib"), but in this case be sure to check that the libraries do not have direct dependencies. If a lib to bundle has a dependency in React, this means that lib will be packaged in the bundle, potentially leading to multiple bundles having React inside them (and making weird failures at runtime). The library should rather use peerDependencies so that b.require does not try to package these dependencies
Sounds like the perfect use case for factor-bundle.
From the browserify handbook:
factor-bundle splits browserify output into multiple bundle targets based on entry-point. For each entry-point, an entry-specific output file is built. Files that are needed by two or more of the entry files get factored out into a common bundle.
Thanks for all suggestions but the solution I have chosen is a "shim" if that is the correct term. Looks like this:
Browserify react/addons into it's own file
Create my own file (called shim) only containing this: module.exports = require('react/addons');
Browserify my shim and use the expose option, exposing it as react
Now, either if react or react/addons is required I get react/addons