snack.expo.io examples

[atticoos]

Taking inspiration from paypal/glamorous, they've done a great job giving hands-on examples after explaining a concept:

This is wonderful for new folks.

React Native is more of a challenge, as it requires a device emulator. That's where https://snack.expo.io/ comes in.

The Problem

@ccheever mentions on twitter that external libraries are not currently supported, but it's something they're aware of and are looking at. This project is also not yet open sourced, but it appears not to be too far away.

The Solution

There's a couple options:

1. Wait, and continue to promote the downloadable examples. The problem here is the friction it creates for the new developer after reading about a concept and wanting to experiment with it.

2. I've shimmed glamorous-native into Snack by bundling it, and modifying it for the default export to be globally available, and pasting it at the bottom of the Snack codefile. This works, but isn't pretty. But I'd take it over nothing. The challenge here is keeping it up to date as the project receives updates, as it's a manual process atm.

[atticoos]

This is about as far as I got shimming in glamorous in the same file.

https://snack.expo.io/rkNMH59lb

Webpack configuration for bundling this

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index.bundle.js',
    libraryTarget: 'var',
    library: 'glamorous'
  },
  module: {
    loaders: [
      {
        test: /\.js$/, 
        loader: 'babel-loader',
        exclude: /(node_modules|__tests__|react-native)/,
        query: {
          presets: ['react-native'],
          plugins: ['transform-object-rest-spread']
        }
      },
    ]
  },
  externals: [
    function (context, request, callback) {
      if (/^(react-native|react)/i.test(request)) {
        return callback(null, 'commonjs ' + request)
      }
      callback()
    }
  ]
}