Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

webpack-isomorphic-tools

Package Overview
Dependencies
Maintainers
1
Versions
125
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webpack-isomorphic-tools - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

2

babel-transpiled-modules/index.js

@@ -178,3 +178,3 @@ 'use strict';

if (!_fs2['default'].existsSync(this.webpack_stats_path())) {
console.log(_colorsSafe2['default'].red('***** File "' + this.webpack_stats_path() + '" not found. Using an empty stub instead until the next try. This is normal because webpack-dev-server and Node.js both start simultaneously and therefore webpack hasn\'t yet finished its build process when Node.js server starts. Just restart your script after Webpack finishes the build (when green letter will appear in the console)'));
console.log(_colorsSafe2['default'].red('***** File "' + this.webpack_stats_path() + '" not found. Using an empty stub instead. This is normal because webpack-dev-server and Node.js both start simultaneously and therefore webpack hasn\'t yet finished its build process when Node.js server starts. Just restart your script after Webpack finishes the build (when green letter will appear in the console)'));
return {};

@@ -181,0 +181,0 @@ }

2

package.json
{
"name": "webpack-isomorphic-tools",
"version": "0.1.2",
"version": "0.1.3",
"description": "Transforms CSS-alike text into a React style JSON object",

@@ -5,0 +5,0 @@ "main": "babel-transpiled-modules/index.js",

56

README.md

@@ -12,3 +12,3 @@ # webpack-isomorphic-tools

Is a small helper module providing full support for isomorphic (universal) rendering when using webpack.
Is a small helper module providing full support for isomorphic (universal) rendering when using Webpack.

@@ -19,9 +19,9 @@ ## What it does and why is it needed?

When you write your web application in React, you create the main `style.css` where you describe all your base style (h1, h2, a, p, nav, footer, fonts, etc).
When you write your web application in React, you create the main `style.css` where you describe all your base styles (h1, h2, a, p, nav, footer, fonts, etc).
Then, you use inline styles to style each React component individually (use [react-styling](github.com/halt-hammerzeit/react-styling) for that).
Then, you use inline styles to style each React component individually (use [react-styling](https://github.com/halt-hammerzeit/react-styling) for that).
What about that `style.css` file? On the server in development mode it needs to be injected automagically through javascript to support hot module reload, so you don't need to know the exact path to it on disk because it isn't even a `.css` file on your disk: it's actually a javascript file because that's how webpack [style-loader](https://github.com/webpack/style-loader) works. So you don't need to `require()` your styles in the server code because you simply can't because there are no such files.
What about that `style.css` file? On the server in development mode it needs to be injected automagically through javascript to support hot module reload, so you don't need to know the exact path to it on disk because it isn't even a `.css` file on your disk: it's actually a javascript file because that's how Webpack [style-loader](https://github.com/webpack/style-loader) works. So you don't need to `require()` your styles in the server code because you simply can't because there are no such files. (You only need to require `style.css` in your `client-application.js` which is gonna be a Webpack entry point)
What about fonts? Fonts are parsed correctly by webpack [css-loader](https://github.com/webpack/css-loader) when it finds `url()` sections in your main `style.css`, so no issues there.
What about fonts? Fonts are parsed correctly by Webpack [css-loader](https://github.com/webpack/css-loader) when it finds `url()` sections in your main `style.css`, so no issues there.

@@ -31,10 +31,11 @@ What's left are images. Images are `require()`d in React components and then used like this:

```javascript
// when webpack url-loader finds this `require()` call
// when Webpack url-loader finds this `require()` call
// it will copy `image.png` to your build folder
// and name it something like `9059f094ddb49c2b0fa6a254a6ebf2ad.png`,
// because we are using the `[hash]` file naming feature of webpack url-loader
// because we are using the `[hash]` file naming feature of Webpack url-loader
// which (feature) is required to make browser caching work correctly
var image = require('../image.png')
// or if you are using Babel for javascript transpilation (which you absolutely should do)
// or if you are using Babel for javascript transpilation (which you absolutely should do),
// alternatively:
import image from '../image.png'

@@ -52,9 +53,9 @@

It works on the client because webpack intelligently replaces all the `require()` calls for you.
It works on the client because Webpack intelligently replaces all the `require()` calls for you.
But it wouldn't work on the server because Node.js only knows how to `require()` javascript modules.
What `webpack-isomorphic-tools` does is it makes the code above work on the server too, so that you can have your isomorphic (universal) rendering (e.g. React).
What `webpack-isomorphic-tools` does is it makes the code above work on the server too (and much more), so that you can have your isomorphic (universal) rendering (e.g. React).
What about javascripts on the Html page?
When you render your Html page on the server you need to include all the client scripts using `<script src={...}/>` tags. And for that purpose you need to know the real paths to your webpack compiled javascripts. Which are gonna have names like `main-9059f094ddb49c2b0fa6a254a6ebf2ad.js` because we are using the `[hash]` file naming feature of webpack which is required to make browser caching work correctly. And `webpack-isomorphic-tools` tells you these filenames (see the [Usage](#usage) section).
When you render your Html page on the server you need to include all the client scripts using `<script src={...}/>` tags. And for that purpose you need to know the real paths to your Webpack compiled javascripts. Which are gonna have names like `main-9059f094ddb49c2b0fa6a254a6ebf2ad.js` because we are using the `[hash]` file naming feature of Webpack which is required to make browser caching work correctly. And `webpack-isomorphic-tools` tells you these filenames (see the [Usage](#usage) section).

@@ -65,2 +66,3 @@ For a comprehensive example of isomorphic React rendering you can look at this sample project:

* [webpage rendering express middleware](https://github.com/halt-hammerzeit/cinema/blob/master/code/server/webpage%20rendering.js)
* [the Html file](https://github.com/halt-hammerzeit/cinema/blob/master/code/client/html.js)

@@ -75,3 +77,3 @@ ## Installation

First you create your webpack configuration like you usually do that except that you don't add module loaders for the `assets` you decide to manage with `webpack_isomorphic_tools` (`webpack_isomorphic_tools` will add these module loaders to your webpack configuration instead of you doing it by yourself)
First you create your Webpack configuration like you usually do except that you don't add module loaders for the `assets` you decide to manage with `webpack_isomorphic_tools` (`webpack_isomorphic_tools` will add these module loaders to your Webpack configuration instead of you doing it by yourself)

@@ -83,3 +85,3 @@ ### webpack.config.js

// usual webpack configuration
// usual Webpack configuration
var webpack_configuration =

@@ -113,3 +115,3 @@ {

// webpack-isomorphic-tools reside in a separate .js file to remove code duplication
// webpack-isomorphic-tools settings reside in a separate .js file to remove code duplication
// (it will be used in the server code too)

@@ -124,3 +126,3 @@ var webpack_isomorphic_tools = new Webpack_isomorphic_tools(webpack_configuration, require('./webpack-isomorphic-tools'))

```javascript
import Webpack_isomorphic_tools, { url_loader_path_parser } from 'webpack-isomorphic-tools'
import Webpack_isomorphic_tools from 'webpack-isomorphic-tools'

@@ -150,5 +152,5 @@ export default

],
path: 'path to your project folder here',
loaders: ['url-loader?limit=10240'], // Any png-image or woff-font below or equal to 10K will be converted to inline base64 instead
path_parser: Webpack_isomorphic_tools.url_loader_path_parser
path: 'path to your project folder here', // or "paths"
loaders: ['url-loader?limit=10240'], // or "loader"; any png-image or woff-font below or equal to 10K will be converted to inline base64 instead
path_parser: Webpack_isomorphic_tools.url_loader_path_parser // you don't need to know what this function does but you can always look at the sources (it's an extension point along with a couple more)
}

@@ -159,3 +161,3 @@ }

Then you create your server side instance of `webpack-isomorphic-tools` and register a Node.js require hook in the very main server script (and your web application code will reside in the server.js file which is require()d in the bottom)
Then you create your server side instance of `webpack-isomorphic-tools` and register a Node.js require hook in the very main server script (and your web application code will reside in the server.js file which is `require()`d in the bottom):

@@ -171,4 +173,4 @@ ### main.js

// registers Node.js require hooks for your assets
// (these hooks must be set before you require any of your React components)
// registers Node.js require() hooks for your assets
// (these hooks must be set before you require() any of your React components)
webpack_isomorphic_tools.register()

@@ -180,3 +182,3 @@

// now goes all your web application code
require(path.resolve(__dirname, 'server'))
require('./server')
```

@@ -188,3 +190,2 @@

import React from 'react'
import { refresh, assets } from 'webpack-isomorphic-tools'

@@ -281,2 +282,3 @@ import Html from './html'

// (use webpack DefinePlugin for setting _client_ environment variable)
// (webpack_isomorphic_tools is taken from the "global" scope)
const picture = _client_ ? require('./../cat.png') : webpack_isomorphic_tools.require('./cat.png')

@@ -293,5 +295,7 @@ ```

***** File "g:\work\project\build\webpack-stats.json" not found. Using an empty
stub instead until the next try. This is normal because webpack-dev-server
stub instead. This is normal because webpack-dev-server
and Node.js both start simultaneously and therefore webpack hasn't yet
finished its build process when Node.js server starts
finished its build process when Node.js server starts.
Just restart your script after Webpack finishes the build
(when green letter will appear in the console)
```

@@ -307,2 +311,4 @@

Also uses require() hooking techniques from [node-hook](https://github.com/bahmutov/node-hook) by Gleb Bahmutov
## Contributing

@@ -309,0 +315,0 @@

2

source/index.js

@@ -154,3 +154,3 @@ import path from 'path'

{
console.log(colors.red(`***** File "${this.webpack_stats_path()}" not found. Using an empty stub instead until the next try. This is normal because webpack-dev-server and Node.js both start simultaneously and therefore webpack hasn't yet finished its build process when Node.js server starts. Just restart your script after Webpack finishes the build (when green letter will appear in the console)`))
console.log(colors.red(`***** File "${this.webpack_stats_path()}" not found. Using an empty stub instead. This is normal because webpack-dev-server and Node.js both start simultaneously and therefore webpack hasn't yet finished its build process when Node.js server starts. Just restart your script after Webpack finishes the build (when green letter will appear in the console)`))
return {}

@@ -157,0 +157,0 @@ }

babel-transpiled-modules/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc