I have a styles.css file and I need to load it from a cljs to pass it as a props to a react lib.
The import in node is:
import styles from './styles.css'
Is it possible to do this in ClojureScript with shadow-cljs?
Importing styles.css in webpack is handled by the style-loader which you can sort of hook up by following the webpack guide and exporting things to global objects.
ClojureScript itself (or shadow-cljs) does not support anything in that regard but you could possibly create something similar using macros.
Related
So with the standard HTML/CSS/JavaScript trio, you can write your html, import your .js file then get straight into a query selector and manipulate the DOM.
If I was to replace JavaScript with Dart in the trio, can I just import a .dart file, import dart:html then use a query selector, or do you have to ‘create a dart project’ and have a pubspec file?
You don't need to have a pubspec.yaml, you could just use the dart2js tool to transpile your dart code into javascript.
That being said there aren't many advantages in doing so, you still need a pubspec.yaml to use the imports that point to a package:, to be able to debug your dart code, and use tools such as webdev to serve/build your files.
Note: You'll always need to reference the generated javascript files (e.g. main.dart.js) in your html file, you cannot import the dart file without it being transpiled.
I have a file called src/services/data.json which I use to populate some data for one of my services. I use the following
import embeddedData from "./data.json";
to import the file. When I generate the distribution, as expected the contents are merged in so they're not in the resulting dist folder
Is there something I can do to the webpack configuration so it will export JSON data files? (I'm using vue with TypeScript for my framework)
I would go with Dynamic Imports. Webpack will create separate files for such imports by default. In runtime those files are asynchronously loaded. Webpack
transforms import() calls to Promises so you can use await/async as well.
Will importing local json/text like the following I have written below be async or sync in Create-React-App?
import SampleLocalJson from './sample/sampleJson.json'
This depends on your environment. If you are using webpack >=v2.0.0 (which you probably do if the above line works) this will be done automatically by webpack json-loader during build time and is therefore sync.
If you are not on webpack >=v2.0.0 there can be multiple issues with directly importing json. Here is a good thread about it: How to import a json file in ecmascript 6?
UPDATE
If you are interested in lazy loading the json, there is support for that built in to webpack. They have a good example in their documentation on that.
This is handled by webpack during the build time. That JSON becomes part of your bundle file shipped to the browser.
I'm starting to experiment with Polymer 1.0, and I noticed that the some of files included via Bower are broken up into the following three:
polymer-micro.html
polymer-mini.html
polymer.html
And each file is imported via HTML Imports within the next one down the list. Then, the rest of the file is just JavaScript.
Perhaps, it's my lack of knowledge regarding HTML Imports, but is this a clever way to utilize dependency management for JavaScript without having to add a third-party library like Browserify for example?
I know I can require a file in ES6 like this:
require('./config/auth');
When I try to do this
require('./config/');
I get: Module not found: Error: Cannot resolve directory './config'. Why does this happen? How can I require a directory?
First of all, your requires are in NodeJS/io.js syntax, module in ES6 syntax looks like this:
import "./config/auth";
Or if you want to load something from it:
import authenticate from "./config/auth";
You can't load whole directories at once, but in Node/io.js you can create a module and then load that.
Note that as a workaround you can load a single file that in turn loads multiple files and returns their results. There is also work in progress on an asynchronous loader but that changes so often it's hard to keep track so I wouldn't rely on it just yet.
I personally use a package called require-dir. This should work for you:
import requireDir from 'require-dir';
requireDir('./config');