I'm using React for my components, and in order to package up the styles with my components, I'm requiring them in as per the documented webpack method:
require('./style.css');
But when I try to render on the server, node-jsx throws an error when it attempts to transform the css. Is there another way of transforming the jsx which won't break on css? I'd rather not break the styles out into their own pipeline as that would defeat the advantage of webpack packaging components up nicely.
This can be solved setting webpack's "target" configuration to "node".
This simple example app should explain it clearly.
https://github.com/webpack/react-webpack-server-side-example/blob/master/webpack.config.js
You could use require.extensions like this:
require.extensions['.css'] = function() {return null}
Related
I am looking for a way to call client side JavaScript code from within Elixir .leex files without needing to install Node.js
My goal is to convert html to an image bitstring with something like this library: http://html2canvas.hertzen.com/
I have also looked at https://github.com/revelrylabs/elixir-nodejs as an example.
In a .*eex file you can inject javascript into your elements as a string and it should work. For simple js I do this in my own heex sigils in .ex files. For example,
<button onclick="(() => document.documentElement.scrollTop = 0)()">
Scroll to top
</button>
If your html2canvas function is defined in the javascript bundle delivered to the client, then triggering the function you wrote as a string in your .*eex file should work.
In my opinion this shouldn't really be done for non-trivial js. If you are using Phoenix LiveView, look into hooks. You would write your custom js and trigger it off of a hook, or use a hook to push an event that you would handle server-side in Elixir.
I have a ASP.NET Core application which renders tables on the serverside, some are quite complex.
I used to use sorttable: Make all your tables sortable for make the tables sortable; now as I have included vue.js (2.0, without npm / webpack), the jquery plugin obviously does no longer work properly.
Now, before i transition fully over to 100% clientside table rendering - which I want to avoid for now, if its possible, cause its complex - is there something similar to add sorting to a rendered html with vue or is that concept that old and no longer viable in vue.js and other modern frameworks?
So, questions are:
How to make sorttable work in vue.js are (without npm / webpack)
Or how to add something like that to a already server rendered html with vue?
Looking forward and regards, Peter
Okay, got it. That was a journey :-)
Sorttable script: https://www.kryogenix.org/code/browser/sorttable/
The script:
Vue.component('date-table', {
template: '<div><slot></slot></div>',
props: ['innerHtml'],
mounted: function () {
var self = this;
sorttable.makeSortable(this.$el.firstChild);
},
beforeDestroy: function () {
}
});
The markup:
<date-table v-once>
HERE IS MY ORDINARY HTML WHICH SHOULD BE SORTED BY
"sortable.makeSortable(...."
</data-table>
I'm using PHPStorm 2017.2 and today I faced with some trouble. Is there any way to use arrow functions within vue attributes inside template? Now, i'm getting "expression expected" error highlighted by PHPStorm, when trying to write something like
<template>
<button #click="() => {some code... }">Click me</button>
</template>
Arrow functions works fine inside script tag, but problem with template tag drives me mad.
Functions are not allowed in the template syntax so if the plugin allows it or not doesn't matter anyways + its not good practice --> create a method for it much cleaner and more readable.
Git hub issue for similar problem.
https://github.com/vuejs/vue-loader/issues/364
I'd say it's supported already in vuejs 2.0. I have tested it and it's also written in the docs:
<comp :foo="bar" #update:foo="val => bar = val"></comp>
Just PhpStorm is complaining... If you raise a bug I will upvote!
I created a to do list app using html, css and javascript. I'm trying to create the same app using javascript. The problem I'm facing is that I'm getting this error when I include angular in my application.
Angular: disabling automatic bootstrap. <script> protocol indicates an extension, document.location.href does not match.
this could be an IE bug, try bootstrapping your app manually instead of relying on the standard approach with the ng-app directive.
angular.element(document).ready(function () {
angular.bootstrap(document, ['nameOfYourApp']);
});
https://github.com/angular/angular.js/issues/15567
https://github.com/angular/angular.js/issues/15772
https://www.roelvanlisdonk.nl/2017/02/01/fix-in-ie-angular-1-6-1-disabling-automatic-bootstrap-script-protocol-indicates-an-extension-document-location-href-does-not-match/
I don't know if this a really noob question, but I have seen a lot of documentation about use Express in node.js and Express. But What I see is that they always use another lenguage called "Jade" for rendering an HTML file. Why? I'd like to know if its necesary use Jade or I can render templates in Express with HTML.
No, it's not necessary to use Jade with Express. It's just a popular option since Jade is the default for generated applications and is maintained by the same developer as Express.
They also tend to stay up-to-date with each other, such as the addition of template inheritance in jade as express dropped support for layouts.
But, there are a number of other view engines that offer built-in support for Express. And, the consolidate project can be the mediator/glue so you have even more options:
atpl
dust
eco
ect
ejs
haml
haml-coffee
handlebars
hogan
jade
jazz
jqtpl
JUST
liquor
mustache
QEJS
swig
templayed
toffee
underscore
walrus
whiskers
Note: I believe I misunderstood your question and answered too broadly at first. But, leaving the rest of what I wrote below in case it's still useful.
It's not necessary to use a view engine with Express, but can be helpful.
Express can simply .send() a value as the response:
res.send(new Buffer('whoop'));
res.send({ some: 'json' });
res.send('some html');
But, a view engine like Jade can help with generating more complex, data-driven content from a view/template. They can also help to keep your project organized by intent (separation of concerns), since views are typically kept in their own files.
Albeit, a view engine is necessary if you want to use res.render(). This method depends on the 'view engine' application setting or that you've configured an app.engine().
app.set('view engine', 'jade'); // or ejs, swig, etc.
# ...
res.render('a-view'); // looks for `a-view.jade` based on `'view engine'`
app.engine('jade', require('consolidate').jade);
# ...
res.render('a-view.jade'); // matches the extension to the `.engine()`
If you do decide to use Jade, there are multiple ways of inserting your data, including placing raw HTML in an element in your jade file. You can also insert fragments of HTML if you manually bypass the sanitizers with !{ locals.someHtmlString }
You can check out a demo of the below Jade code (albeit without passing in the locals variables) here: http://cssdeck.com/labs/qkkrzfes
//app.js
app.get('/', function(req, res){
locals.someData = {foo:'Bar'};
locals.someHTML = '<span>hello</span>'
res.render('someTemplate');
//someTemplate.jade
!!!
html
head
body
p.someClass This is plain text that goes in the paragraph
p#someId You can insert data into the text: #{locals.someData.foo}
p <a href='/'>You can just slap HTML in willy nilly</a>
p HTML is escaped by default: #{locals.someHTML}
p Escape HTML with \!{}: !{locals.someHTML}
pre
code=JSON.stringify(locals.someData, null, 2)