Permalink
Browse files

Allow passing a div target option to the renderer; uglify js

  • Loading branch information...
geolessel committed Apr 19, 2017
1 parent d2f3a3f commit ae82eaa91c14016d3178aa45bd7e7ea6a905ac2d
Showing with 68 additions and 41 deletions.
  1. +3 −0 .babelrc
  2. +2 −0 .gitignore
  3. +8 −1 lib/mix/tasks/react_phoenix.install.ex
  4. +4 −0 lib/react_phoenix.ex
  5. +29 −0 package.json
  6. +1 −40 priv/js/react_phoenix.js
  7. +15 −0 src/react_phoenix.js
  8. +6 −0 test/react_phoenix_test.exs
View
@@ -0,0 +1,3 @@
{
"presets": ["env"]
}
View
@@ -18,3 +18,5 @@ erl_crash.dump
# Also ignore archive artifacts (built via "mix archive.build").
*.ez
node_modules/
@@ -7,7 +7,7 @@ defmodule Mix.Tasks.ReactPhoenix.Install do
def run(_args) do
info "\nInstalling ReactPhoenix..."
info "Copying javascript files..."
case File.cp("./_build/dev/lib/react_phoenix/priv/js/react_phoenix.js", "./web/static/js/react_phoenix.js") do
case File.cp(Path.join([package_path(), "priv", "js", "react_phoenix.js"]), Path.join([File.cwd!, "web", "static", "vendor", "react_phoenix.js"])) do
:ok ->
info "Done."
info "Adding required import to web/static/js/app.js..."
@@ -24,4 +24,11 @@ defmodule Mix.Tasks.ReactPhoenix.Install do
defp info(txt), do: Mix.shell.info(txt)
defp error(txt), do: Mix.shell.error(txt)
defp cmd(txt), do: Mix.shell.cmd(txt)
def package_path do
__ENV__.file
|> Path.dirname()
|> String.split("/lib/mix")
|> hd()
end
end
View
@@ -13,4 +13,8 @@ defmodule ReactPhoenix do
props = Poison.encode!(props)
content_tag(:div, "", [{:data, [react_class: name, react_props: props]}])
end
def react_component(name, props, opts) when is_map(props) do
props = Poison.encode!(props)
content_tag(:div, "", [{:data, [react_class: name, react_props: props, react_target_id: opts[:target_id]]}])
end
end
View
@@ -0,0 +1,29 @@
{
"name": "react-phoenix",
"version": "0.1.2",
"description": "Simple helper functions to allow you to easily render React components in your Phoenix views. This is developed on top of brunch.",
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"watch": "babel src --out-dir priv/js --watch",
"release": "node ./node_modules/babel-cli/bin/babel src/react_phoenix.js | node ./node_modules/uglify-js/bin/uglifyjs - --mangle --compress --output priv/js/react_phoenix.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/geolessel/react-phoenix.git"
},
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/geolessel/react-phoenix/issues"
},
"homepage": "https://github.com/geolessel/react-phoenix#readme",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-env": "^1.4.0",
"babel-preset-es2016": "^6.24.1",
"uglify-js": "^2.8.22"
}
}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -0,0 +1,15 @@
import React from "react"
import ReactDOM from "react-dom"
export default class ReactPhoenix {
init() {
const elements = document.querySelectorAll('[data-react-class]')
elements.forEach(e => {
const targetId = document.getElementById(e.dataset.reactTargetId)
const targetDiv = targetId ? targetId : e
const reactProps = e.dataset.reactProps ? e.dataset.reactProps : "{}"
const reactElement = React.createElement(eval(e.dataset.reactClass), JSON.parse(reactProps))
ReactDOM.render(reactElement, targetDiv)
})
}
}
@@ -32,4 +32,10 @@ defmodule ReactPhoenixTest do
expected = "<div data-react-class=\"test\" data-react-props=\"{&quot;my&quot;:&quot;props&quot;}\"></div>"
assert html == expected
end
test "react_component accepts a target div option" do
html = Phoenix.HTML.safe_to_string(react_component("test", %{}, target_id: "test-id"))
expected = "<div data-react-class=\"test\" data-react-props=\"{}\" data-react-target-id=\"test-id\"></div>"
assert html == expected
end
end

0 comments on commit ae82eaa

Please sign in to comment.