threepointone / ratpack Goto Github PK

~

just an idea.

// @ratpack { render: true }
export default <div>hello world</div>

variant

// @ratpack { render: true }
export default function App(){ // or a class, whatevs 
  return <div>hello world</div>
}

or you could choose a component to render

// @ratpack { render: 'MyComp' }
export class MyComp extends React.Component {
  render() {
    return <div>hello world</div>
  }
}

It looks like https://github.com/webpack/transform-loader would work fine, which means there maybe just needs to be some means of adding webpack config. Perhaps the nearest config file (package.json? webpack.config.js?) would be the place to hook up this and, more generally, whichever particular tools your project might need.

// @ratpack { target: 'node' }
console.log('we in node yet?')

experience - instead of opening a terminal, we could setup remote debugging and open up a browser tab instead, with the chrome dev tools loaded etc.

• how to 'restart' the app? cmd+r? a button?

magic pragmas

ratpack supports some magic incantations you can put at the top of your entry file
to customize the webpack/babel backends. A simple example would look like this -

/* @ratpack {
  devtool: 'eval',
  alias: {
    react: 'preact-compat',
    react-dom: 'preact-compat'
  }
}
*/
require('react-dom').render(<div>look, preact!</div>, window.root)

(assuming preact-compat is available locally or in ~/.ratpack/node_modules)

Here's a full list of 'somewhat working' pragmas

devtool

devtool: 'source-map' (ref.)

public

public: './my/public/folder' (ref.)

jsx

jsx: 'Inferno.createElement'

This is different from babel's @jsx pragma, in that it will apply to all js files, not just the one

proxy

proxy: { '/api': 'http://localhost:3000' } (ref.)

provide

provide: { 'Glamor': 'glamor/react' } (ref.)

alias

alias: {
  react: 'preact-compat',
  react-dom: 'preact-compat'
}

(ref.)

define

define: { 'process.env.NODE_ENV': 'test' } (ref.)

rules

rules: [ { files: '*.vue', loader: 'vue-loader', options: { some: 'options' } } , ...]

nb: files is a glob, which gets converted to a regex for webpack's test prop

babel presets and plugins

babel: {
  presets: ['vue', [ 'a11y', {...} ],
  plugins: ['./some/path', ... ]
}

These don't 'work' yet, but sharing possible syntax

target

target: 'node' (ref.)

offline

offline: <options> (ref.)

autoinstall

autoinstall: true (ref.)

plugins

plugins: [ {<module> <options>}, ... ]

other

reload: true
hot: true
production: true
port: 3999

thoughts/questions/ideas?

Nice idea 👍 to use electron.
I have problems with refs - refs does not initialize correctly.
Also, componentDidMount lifecycle seems to have problems

~

Is it possible that ratpack isn't handling query parameters in loader names correctly? I'm not all that familiar with webpack and am having some trouble setting up a loader. The obvious fix just passes the problem elsewhere so that I'm not quite sure how to fix it.

My ./ratpack/package.json looks like this:

{
  "name": "ratpack-local",
  "dependencies": {
    "brfs": "^1.4.3",
    "transform-loader": "^0.2.3"
  }
}

My test.js looks like this

/* @ratpack {
  rules: [{
    files: '*.js',
    loader: "transform-loader?brfs",
    enforce: "post"
  }]
} */

I get the following error in the ratpack console:

If I remove ?brfs from the loader name, then the module lookup seems to succeed, except now I get this in the browser console:

I hate to put this on you (everything else is looking great!) but just wanted to check run by you the possibility that it might be a corner case in how ratpack is handling this. 🚀

Using v1.0.6

comes with liberal babel defaults, including future facing extensions (and decorators!)

Got an error:

Uncaught Error: Module build failed: SyntaxError: Decorators are not officially supported yet in 6.x pending a proposal update.
However, if you need to use them you can install the legacy decorators transform

Doesn't work with a custom .babelrc file either.

Works locally

This is what's in my file

function readonly (target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Human {
  constructor(name) {
    this.name = name
  }
  @readonly
  speak() {
    console.log('Hi! My name is ' + this.name)
  }
}

const siddharth = new Human('siddharth')
siddharth.speak()            // Hi! My name is siddharth
siddharth.speak = function () {console.log('Hi! My name is dumdum')}
siddharth.speak()

should dump logs somewhere so can gather them for errors, etc

https://twitter.com/threepointone/status/819051387040518145

similar to #25, but for linux.

edit/build/deploy/share
~

I downloaded the release.

I moved the app into Applications folder.

I double clicked it and got the standard security warning that this app is not made from an identified developer.

I went to Settings > Security & Privacy to open the app anyways.

When the app started I got a dialog with the error below. On my 2nd attempt to run the app, it worked fine.

A JavaScript error occurred in the main process

Uncaught Exception:
Error: ENOENT: no such file or directory, mkdir '/Users/me/Library/Application Support/ratpack/extensions'
    at Error (native)
    at Object.fs.mkdirSync (fs.js:922:18)
    at getPath (/Applications/ratpack.app/Contents/Resources/app/node_modules/electron-devtools-installer/dist/utils.js:26:18)
    at Object.<anonymous> (/Applications/ratpack.app/Contents/Resources/app/node_modules/electron-devtools-installer/dist/index.js:42:59)
    at Module._compile (module.js:556:32)
    at Module._extensions..js (module.js:565:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Applications/ratpack.app/Contents/Resources/app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)

2 separate things

• build - make a production build, with h2 friendly assets, etc ready to go
• deploy - push to surge and / or now.sh

via https://github.com/NekR/offline-plugin, should 'just work'

for vars like %PUBLIC_URL% etc (hat-tip CRA)

what's the story with hmr with react? what about vue et al?

Drag and drop is nice, but perhaps there's a way of running this from the command line or relative to a given directory? Perhaps the window would list js files in that directory? Perhaps drag-and-dropping a folder lists all the js files in it? The ability to quickly switch between files with common setup would be awesome.

I usually use budo, which is great; it's just the lack of multiple entry points that's the main hangup (ref: mattdesl/budo#139 ). I've been meaning to invest a bit of time to better understand and improve my setup; it's just never quite worthwhile.

[edit: simplified]

ratpack isn't trying to do too many things. We'll keep this simple too.

open

ratpack

or

ratpack path/to/script.js

install app?

ratpack --app

should just open the folder holding the app, that the user can then copy etc

~

this is a catchall issue for windows bugs/quirks. @shrayasr, calling on your help for this.
there are 2 major touchpoints to make sure this thing works for windows. bin/ratpack, and src/app.js. further, I've marked possible areas to check with //todo - windows specifically stuff to do with paths. a lot of it should 'work', but who knows :P

your mission, if you choose to accept it, is to make this work on windows :)

~

Hi!

Looks like your name & color choice is... errr.... a bit conflicting with some popular project in JVM world:
https://github.com/ratpack/ratpack

:)

there's a bug where the server seems to be serving with a compiler from a previous instance when you change pragmas. this is similar to the issue I had with webpack using the same port (hence the hashing / port number genration). should solve this properly.

This is a lot more intense that I could imagine. It involves -

• compile code, not using the babel-register hack
• integrated with autoupdater
• use electron-builder to generate installers for each platform
• that also involves getting code signing certificates($$$!) per platform
• probably have to set up CI on travis + appveyor to get builds for all platforms
• deploy a nuts server (to now.sh?), making sure not to proxy requests to github
• figure out a schedule by which I can regularly replease on npm, but do slower auto update releases (so as to not kill user's bandwidth) and yet allow them to optionally update of required

brrrr.

so it appears this is a long term goal. To shorten the pain, we'll get cli support in (#11), and write docs showing how to install / run from cli. this has advantage of updates always being small, but disadvantage that they have to do it by hand. We'll see what we can do to make that painless too.

E.g. writing quick bit of code and you realize you want lodash and ratpack installs that in the background for you.

Probably can just use https://github.com/ericclemmons/npm-install-webpack-plugin