Standardize adding styling & scripts to core via plugins

[ndelangen]

If I'm correct, there currently is no standard way of adding styling to sourcejs via middleware.

Would it be a good idea if middleware could register additional styling source files and core would compile and bundle them?

Of do you think it would be better not to add this complexity and just provide an array of stylesheets.
That would simply be placed in the head.

I'm leaning towards just having every middleware have it's own stylesheet. It will also mean no source-build would be required after a plugin install.

[ndelangen]

@operatino I can incorporate the second idea pretty easily in my dev-branch.

[robhrt7]

There's no common way of adding styles from server side plugins, we currently only have Css loader module for client side plugins.

I definitely plan to drop the idea of building SourceJS on user side, to lower dependencies amount, therefore plugins should provide built set of assets. Then you can just create a link to /node_modules/sourcejs-plugin/assets/some.css stylesheet and it will be loaded separately.

[ndelangen]

Ok, no client-side building.
I guess, it has both pros and cons.. Pro's would be that middleware plugin can be less verbose and re-use mixins and variables provided by sourcejs. Cons would obviously be that users need to run a certain command after installing a plugin.

---

Should we:

1. Let's create a convention for middleware so they just have to place a css file somewhere in a predefined folder and have sourcejs automaticly load it (always).
2. Create a global array (placeholder) for middleware to inject their css-file path into. (middleware is in control of whether css file should be included).
3. Both

[robhrt7]

We can start with defining an internal util that will just accept the link to stylesheet (eg /node_modules/sourcejs-plugin/assets/some.css) and req object and then inject the link to the top of the req.specData.renderedHtml.

This will define a standard interface for the plugins to load CSS, keeping them flexible on where to put their styles. Later on, under the hood we can start injecting the url to styles to some array, using a common mechanism for defining the list of assets.

[ndelangen]

How would a middleware access this internal util?

like this ?:

var specUtils = require(path.join(global.pathToApp,'core/lib/specUtils'));

specUtils.appendStylesheet(req, '/node_modules/sourcejs-plugin/assets/styles.css');

---

What are your thoughts on this:

req.stylesheets = req.stylesheets.concat('/build/styles.css');

This method needs no additional util function, that needs to be required.

An even more generic approach could look like this:

req.assets = req.assets.concat([
  {
    path: '/node_modules/sourcejs-plugin/assets/styles.css'
  },
  {
    path: '/node_modules/sourcejs-plugin/assets/scripts.js'
  },
  {
    path: '/node_modules/sourcejs-plugin/assets/scripts2.js',
    async: true
  },
  {
    path: '/node_modules/sourcejs-plugin/assets/styles2.css',
    type: 'preconnect'
  }
]);

Keeping this information as data for as long as possible and only rendering it to renderedHTML at the last possible stage, allows middleware to interact. And not worry about the details of rendering to HTML.

[ndelangen]

type can be automatically detected and default to js and thus render in a

<script src={path}></script>

[robhrt7]

I agree that we need to have something like req.stylesheets in future, but I preffer starting small, and a util will allow creating an abstraction, on top of which we'll be able to do different implementations in future.

I would start with util that appends to req.specData.renderedHtml, and then do req.stylesheets and similar lists.

[ndelangen]

As req.stylesheet or something alike would be solely for middleware developers, why do you think it's wise to hold off this change?

I'd personally prefer the option of just concatenating my asset-references into an array, and have sourcejs take care of embedding them for me.

I do not see this options as something that's a lot 'bigger', so I also don't know why starting small would be the better choice.

[robhrt7]

In case if we start with managing stylesheets like this only for plugins, it's okay to start with it. I just didn't wanted to do more changes for regular assets linking, since upcoming release have already enough of big changes planned.

But I would still insist on using a util for that, so when we continue the idea with assets linking as a standard for other use cases (like link assets in specs per component) it will be a smooth transition, without breaking the plugins and keeping legacy support.