I have an old javascript library with methods I need to use from within my spine app. How do I include it for use within spine?
You need to include the library in your slug.json in the "libs" section like so:
{
"dependencies": [
"jqueryify",
...
],
libs: [
"path/to/old/javascript/file.js"
]
}
This will tell Hem to package files under "lib" first in your application.js. You should have access to the methods in your Spine classes. Make sure you include the extension (".js") on libs and path them relative to the root of your app. You can see the Hem docs for more info.
Depends on your pipeline for assets and your platform. If just the old library to a page, use a script tag:
<script type="text/javascript" src="my_old_library.js"></script>
This is likely the same way you included spine.js on your page.
Related
I created a new Kotlin/JS Gradle project using the wizard in IntelliJ.
I'm unclear how I'm supposed to add css to the project. The documentation explains how to enable css webpack support, but it doesn't actually say how to add the css file into your project (i.e., how to use the file).
For example, in a normal project, you would just import it in a javascript file. Since I am writing in Kotlin, how do I do it now?
The current documentation is not very precise about this. There are actually two cases:
Importing CSS from existing packages
You can pretty easily import CSS files from other Node-modules using the require() function:
import kotlinext.js.require
import kotlinx.browser.document
import react.dom.h1
import react.dom.render
fun main() {
require("bootstrap/dist/css/bootstrap.css")
render(document.getElementById("root")) {
h1 { +"Hello"}
}
}
For this to work, you need to specify cssSupport.enabled = true in your Gradle build, just like described in the documentation. CSS imported this way will be processed by Webpack.
Incorporating your own CSS into the Webpack build
This seems to be a bit tricky right now. The KotlinJS plugin doesn't copy any resources to the Webpack's build directory (build/js/packages/<project_name>) by default and I didn't find any obvious configuration option for this. To solve it, you have to tell Webpack where it can find your styles:
Create webpack.conf.d directory in project's root and put inside some JS file containing:
config.resolve.modules.push("<your_stylesheet_dir>");
This config will be picked up by the KotlinJS plugin and merged into the generated build/js/packages/<project_name>/webpack.config.js. With this configuration you can just require() project's styles like in the example above. It is kind of mentioned in the documentation.
Alternatively you can tweak the Gradle build, so it copies the stylesheets into the Webpack's build dir:
task("copyStylesheets", Copy::class) {
from(kotlin.sourceSets["main"].resources) {
include("styles/**")
}
into("${rootProject.buildDir}/js/packages/${kotlin.js().moduleName}")
// kotlin { js { moduleName = "xyz" }} has to be set for this to work
}
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinJsDce::class) {
dependsOn("copyStylesheets")
}
Simply sticking a CSS file into main/resources and referencing it in index.html worked for both browserDevelopmentRun and serving the production build, statically. The CSS file appears in build/distributions.
My build:
kotlin("js") version "1.7.20"
index.html
<link rel="stylesheet" href="index.css">
index.css is in the same resource folder as index.html.
This also works for images anything else, apparently.
I am new to Snowpack and I have a Template.html' file in my source folder that I would like Snowpack to read and produce an index.html` in the destination output folder. It would also be nice if I can use some variables in the template that Snowpack would simply substitute from the environment or configuration file. Any idea how to achieve this?
If I understand correctly, you are looking to use an alternative to index.html. I'm not sure if you are using react or a different framework, but in case you are using react, I found a solution.
This context is for flavor and is not related to the question, but I'll share in case it is helpful to others. In my case, I wanted to block the following warning on my production build (due to react-scripts, not snowpack):
Loading module from “http://localhost:3000/dist/index.js” was blocked because of a disallowed MIME type (“text/html”).
This is because snowpack requires the following script tag in index.html to generate your pages:
...
<script type="module" src="/dist/index.js"></script>
...
I don't need snowpack in production at this time ---I'm just here for the module hot reloading for now --- so I want to suppress this warning with an alternative index.html file, just for snowpack so that it has this script tag.
Solution:
So for your case where you want to use variables in snowpack --- but not your production build (or other run scripts for that matter) --- you can do the following:
Create a template with the above script in your index.html body, plus whatever other vars you need. Name it something other than "index.html". I went with indexsnowpack.html for simplicity.
Add the following route (Docs here) to your snowpack.config.js file in your apps root directory:
module.exports = {
...
routes: [
{
match: "routes",
src: ".*",
dest: "/indexsnowpack.html"
}
]
...
}
BEWARE: The above solution will match all paths to your new indexsnowpack.html file. So if you are not using a single-page application setup, you'll run into some hiccups. Further, if you have other routes defined (e.g., for api calls), place those above this route so that this route functions as a fallback for all calls except your api.
Using OroCommerce v4.1.8 (latest stable version).
I have created my custom theme (extended from "default" theme) which renders correctly (all css is loaded and applied as defined), but for my custom JS file that does not appear to be included in the page. Below is my \Resources\views\layouts\mytheme\config\jsmodules.yml file:
shim:
jquery:
expose:
- $
- jQuery
magnificPopup:
imports:
- jQuery=jquery
owlCarousel:
imports:
- jQuery=jquery
exports: owlCarousel
aliases:
magnificPopup$: mytheme/js/magnific-popup.min
owlCarousel$: mytheme/js/owl.carousel.min
my-main$: mytheme/js/main
dynamic-imports:
mytheme:
- magnificPopup
- owlCarousel
- my-main
On the webserver, I can see a compiled mytheme.js file getting created under /var/www/oroapp/public/layout-build/mytheme/chunk folder, but looking into the HTML for the home page, there is no line/reference to load this file.
Please advise what am I missing or how to troubleshoot this?
OroCommerce uses Webpack to build JS dependencies. By default, all the configured JavaScript dependencies files are combined to the single file, e.g.:
<script src="/layout-build/mytheme/app.js"></script>
Where mytheme is your theme name.
To use one of the above dependencies in your ES6 module, you have to require it manually with the import statement or using the require function.
For more details, see the official documentation about JavaScript Modularity in the OroCommerce Application.
I'm building a library of aurelia custom elements for use by several different aurelia apps and am running into trouble getting the custom element html hooked into the app bundle properly with the CLI process.
I'm currently thinking that the library will be part of package.json and thus listed under node_modules/my-lib. What should the delivered .html format be
<template>...</template>
or should it be delivered in required format
define('text!my-lib/component1.html', ['module'], function(module) { module.exports = "<template>\r\n ...
If the former - what do I put in aurelia.json to get it to be included correctly in the vendor-bundle?
If I do resouces['../node_modules/my-lib/**/*.html'] in my-lib dependency section - it gets included as html in a js file which throws an error.
If I add as source to the vendor-bundle or using my own bundle my-lib-bundle.js
"source": [
"[../node_modules/my-lib/**/*.js]",
"../node_modules/my-lib/**/*.{css,html}"
],
Nothing gets included then except the 'main' listed in the one dependency.
If I add to the markupProcess (which seems more linked to the app and not a library)
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": [
"src\\**\\*.html",
"..\\node_modules\\my-lib\\**\\*.html"
]
},
I get the html correctly added to app-bundle but has the wrong path because it includes the '../node_modules' in the define so it's not found when the app attempt to use it.
I'm not using the CLI to build my lib as I want the app to only include pieces it uses. So the JS is built and delivered in AMD format, but I wasn't sure the process to go through with HTML?
Suggestions?
There is a skeleton plugin repo # github
https://github.com/aurelia/skeleton-plugin
With build scripts and all
I'm trying to refactor a library that uses Browserify by shimming certain modules out of the bundle using browserify-shim. Specifically, the library uses require("codemirror") but I want to provide a bundle that doesn't include CodeMirror but will rather use one that is provided via CDN.
So I've got browserify-shim config in my package.json like
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror"
}
So far so good. require('jquery') and require('codemirror') have disappeared from the browserified bundle and been replaced by the expected code snippet to grab jQuery and CodeMirror off of the window object.
The library also requires some CodeMirror add-ons. For example require('codemirror/addon/hint/show-hint.js'). That's fine. I want that add-on bundled. However, within this add-on is a UMD wrapper that includes require("../../lib/codemirror"). Browserify is seeing this and is bundling the CodeMirror from /node_modules/codemirror/lib/codemirror.js because of this (I think). I want this to use window.CodeMirror as defined in the codemirror shim instead, but cannot figure it out. Have tried many variations including the following:
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror",
"../../lib/codemirror": "global:CodeMirror",
"codemirror/addon/hint/show-hint.js": {
"exports":null,
"depends":["../../lib/codemirror:CodeMirror"]
}
}
That require("../../lib/codemirror") will not go away! I'm sure I'm missing something.
I'm running this from a Gulp script, but I don't think that should make any difference. Browserify version 3.38.1. Browserify-shim version 3.7.0.
Any ideas?
If you add browserify-shim with {global: true}, it should be applied to your dependencies' dependencies (and so on) as well, which should hopefully do what you want.
Assuming you're using raw browserify in your Gulpfile, instead of:
b.transform('browserify-shim');
do:
b.transform({global: true}, 'browserify-shim');
If you're using gulp-browserify, I'm not sure whether there's any way to specify global transforms.
{global: true}
works for me... why is this not a default?