digitalie / one-loader Goto Github PK

This is currently the only place those two dependencies are used. It shouldn't be too much work to rewrite that bit to not use it. That would make it so that one-loader has almost no external dependencies.

Is there any way to add extra types of sections (in addition to 'script' and 'style').
I would very much like to have a 'jest'-section for unit tests and a 'storybook'-section for Storybook stories.

In the example you set options.map to the following:

options: {
   map: {
      'text/css': ['style-loader', 'css-loader'],
      'javascript': 'babel-loader'
   }
}

But this seem a bit odd to me, given that the sections are called style and `script, wouldn't this make more sense:

options: {
   map: {
      'style': ['style-loader', 'css-loader'],
      'script': 'babel-loader'
   }
}

Especially in regards to #44 if we want to add more types of sections. It seems that the map-option should be named the same as sections.

Gatsby (and probably also next.js) abstract the webpack configuration away, and therefore make normal webpack configuration as documented in the one-loader readme.

Gatsby provides hooks to append the webpack config, but in their documentation says, you should avoid editing the webpack config and always check for an existing gatsby module first.

I've got it working with the config below, but it might be worth creating a one-loader gatsby plugin.

// gatsby-node.js

module.exports = {
	onCreateWebpackConfig: ({stage, rules, loaders, plugins, actions}) => {
		actions.setWebpackConfig({
			module: {
				rules: [
					{
						test: /\.one$/,
						use: [
							{
								loader: 'one-loader',
								options: {
									map: {
										'text/css': rules.css().use,
										'text/scss': [...rules.css().use, 'sass-loader'],
										'javascript': rules.js().use,
									}
								}
							},
						],
					},
					{
						test: /\.scss$/,
						use: [...rules.css().use, 'sass-loader'],
					},
				],
			},
		})
	},
	resolvableExtensions: () => {
		return [`.one`];
	}
}

So, should we (and is someone willing to), create a gatsby plugin?
Or should we create some documentation here to show people how to get it working manually?

I really like the concept of this project, but it seems that I need to eject from create-react-app.

Any chance to have a custom script like TypeScript's or Kitze's?

Hi. Thanks for this, I was writing a loader to do this and researching when I discovered it.

One thing I would like would be an option to pass a block to loaders defined in config. Vue-Loader was recently updated to work that way, but I haven't looked at how they do it. Maybe by enabling a "useConfig" option, the loader could add each block as a dependency or figure out a way to load the one file as other types with an inline option to only load a certain block (or filter out other). The type specified like <style lang="sass">. I'm wondering how difficult it would be to implement something like this so people could easily use existing configs and the same config used for .one files would be used for import statements in files.

I'm sure this could be done from config side by storing each config in a var, too, just wondering if it could be integrated. Thanks.

First off, thanks so much for making this.

I love vue's single file components, it just makes sense. I'm brand new to React, and after some googling, it turns out that React recommends CSS in JS, which makes me want to puke. Not only are we going back to inline styles, but I'd have to put styling right next to component logic, camel case everything, etc.

/rant

Anyways, how do you feel about using this in production? Is it stable?

Side note: Vue-loader allows you to inject a scss file into every <style></style>, so you don't have to import variables, mixins, functions, etc into every component. Does your package allow this?

The readme says that one-loader is A webpack loader to enable single-file React components. Inspired by vue-loader..

But is it really react specific? And why don't we want to market it as a general purpose single file component loader?

How to I set this up to work with TypeScript?