myitcv / react Goto Github PK

When generating the <s> element (strikethrough), the generated function S to create a new <s> conflicts with the type alias type S = core.S on line 71 in react.go.

I am trying to use Sortable from within React.

The instructions state:

npm install sortablejs --save
=====
and then:

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>

var el = document.getElementById('items');
var sortable = Sortable.create(el);

I can't seem to load the npm library.
Since it's chrome based, it doesn't understand require( )

Is there any instructions for how to "reactify" non-react libraries from within this package?

If a new HTML element name starts with v (e.g. <var>), then reactGen produces illegal code. Both the receiver and first formal parameter in the assign method are named v:

// Code generated by reactGen. DO NOT EDIT.

package react

// VarProps defines the properties for the <var> element.
type VarProps struct {
	ClassName               string
	DangerouslySetInnerHTML *DangerousInnerHTML
	DataSet
	ID  string
	Key string

	OnChange
	OnClick

	Ref
	Role  string
	Style *CSS
}

func (v *VarProps) assign(v *_VarProps) {

	v.ClassName = v.ClassName

	v.DangerouslySetInnerHTML = v.DangerouslySetInnerHTML

	if v.DataSet != nil {
		for dk, dv := range v.DataSet {
			v.o.Set("data-"+dk, dv)
		}
	}

	if v.ID != "" {
		v.ID = v.ID
	}

	if v.Key != "" {
		v.Key = v.Key
	}

	if v.OnChange != nil {
		v.o.Set("onChange", v.OnChange.OnChange)
	}

	if v.OnClick != nil {
		v.o.Set("onClick", v.OnClick.OnClick)
	}

	if v.Ref != nil {
		v.o.Set("ref", v.Ref.Ref)
	}

	v.Role = v.Role

	// TODO: until we have a resolution on
	// https://github.com/gopherjs/gopherjs/issues/236
	v.Style = v.Style.hack()

}

I had a look at your todo, and yours are more low level.
Mine are these, and maybe some of them intersect with your low level ones, so let me know your thoughts.

i have done allot of this stuff before on other framework, so can help out.

TODO from me:

• Benchmark.
  • We need to see hwo she performs....
  • Make a app with many navigations that go deep
  • Add a back button in the top nav, so we see how it performs
  • See how back button performs on mobile.
  • This will highlight if 7 where we do bundling and the PRPL / Service Worker pattern
• i18N
  • since its 100% go we can use the golang tooling for this.
  • Its not just langugae but also currency, numbers, dates.
  • Add a language select to the Top nav for testing to se how it performs.
• MD components
  • http://www.material-ui.com
    • Has the best set of components you need for real apps. Its a good start for lots of bang for buck.

ON

Same bug on line:

Needs gopherjs/gopherjs#604 to be solved first

go get -u myitcv.io/react returns

package myitcv.io/react: unrecognized import path "myitcv.io/react" (parse https://myitcv.io/react?go-get=1: multiple meta tags match import path "myitcv.io/react")

Hello There.

I built the HelloWorld app by navigating to %GOPATH%/src/example.com/helloworld and executing reactGen -init bootstrap. I then kicked off the HTTP server with gopherjs serve. It started with the following message:

C:\mcdev\gowork\src\example.com\helloworld>gopherjs serve
serving at http://localhost:8080 and on port 8080 of any available addresses

Then when I navigated to http://localhost:8080/example.com/helloworld/, it served a blank page with the following error showing in the browser console and the Command prompt:

helloworld.js:1 /src/syscall/syscall_nonlinux.go:5:18: undeclared name: SYS_EXIT
(anonymous) @ helloworld.js:1
helloworld.js:2 /src/syscall/syscall.go:53:39: too few arguments in call to Syscall
(anonymous) @ helloworld.js:2

Any thoughts?

Revised 2017-03-29 following resolution on gopherjs/gopherjs#611

As of f51106b whenever the github.com/myitcv/gopherjs/react package is included as part of a GopherJS build/serve, we bundle React's .js files by default. That is to say in effect React's .js files get loaded as the served/built GopherJS output is loaded.

For context, React's .js files come in two flavours:

• development: non-minified, contains helpful warnings etc, larger and slower
• production: minified, minimal, fastest

This issue is designed to track discussion the decision on whether to bundle or not by default. Specifically there are two options:

Option 1: bundle by default

gopherjs build                       =>  includes React production (minified) .js files
gopherjs build --tags noReactBundle  =>  do _not_ bundle ANY React .js files

Option 2: require explicit build tag to bundle

gopherjs build                        =>  React not bundled; must have been loaded separately
gopherjs build --tags bundleReact     =>  includes React production (minified) .js files

The use of the GopherJS -m minify flag is orthogonal to either of the above options (following the conclusion on gopherjs/gopherjs#611)

As is the point being decided in #31 (for now we bundle the production version, with the development option available via the debug build tag)

When the state has the same type of variable, it seems that the generated code store to the same key to
map rootNode.store.

A better pattern for inlining constant blocks of HTML within components. This ultimately needs to take the form of some changes within the compiler (a la JSX in TypeScript). Assuming we're not going to make/rely on any language changes, we need to do this via something like react.JSX(s string) where the compiler ensures the string argument is a compile time constant (in this first instance, keep things simple), and then rewrites the AST to be the equivalent component constructor calls. In the short term, we could actually implement this at run time using https://godoc.org/golang.org/x/net/html and a reverse mapping from js tags to field names (and panic if there are problems)

Hello, I have encountered an issue while trying to update components across Go packages. Using the same code that renders successfully in the same Go package causes a frozen render when broken to two separate Go packages. This may be an infinite loop.

Here are is the sample code to reproduce the success and fail cases, just go get and run gopherjs serve on the root package with main.
Pass: https://github.com/norunners/helloreact/tree/def-pass
Fail: https://github.com/norunners/helloreact/tree/def-fail

I observed the same behavior from passing the callback behavior as Props.
Pass: https://github.com/norunners/helloreact/tree/props-pass
Fail: https://github.com/norunners/helloreact/tree/props-fail

// Equals must be defined because struct val instances of TodoAppState cannot
// be compared. It is generally bad practice to have mutable values in state in
// this way; myitcv.io/immutable seeks to help address this problem.
// See myitcv.io/react/examples/immtodoapp for an example
func (c TodoAppState) Equals(v TodoAppState) bool {

In your todo sample application, you have a Equal( ) function attached to the state.

Does that mean under your library, React does not take care of determining if the state has changed for the purposes of rendering the actual DOM? It seems like you determine it on the Go side.

First off, kudos on this library. When considering this library over vecty ... it was an easy decision. Vecty has created a fat layer making it hard to understand and brittle. Your lib feels like a much better amount abstraction and OMG you have examples and documentation (worth it's weight in gold)!

On to the feature request:
The CSS bit is great. However, there many more CSS types/styles out there. Since this library isn't about removing the need to understand how CSS is done, would you consider using a map[string]string instead of explicitly coding for each CSS type/style and value?

Thus the prop for the css would be a map like:

map[string]string{
    "display": "flex",
    "color":   "#444",
    ...
    }

can we have tables and associated tags?

This issue is best understood in the context of the Timer, but extends to components which institute some form of callback (mouse click, timer elapsing...)

Consider the context where the parent component of the Timer is the Examples component, and the following sequence of events:

• Examples() gets called in main.go and react.Render called to render the Examples instance into the id="examples" div in index.html
• This causes Examples.Render() to be called
• This in turn causes an instance of Timer to be created

Detail to follow

Generate minimal app with

reactGen -init minimal

Add the following code to app.go

type AppState struct {
        m map[string]string
}

type AppProps struct {
        m []string
}

Regenerate code

go generate

Try to build app

go build
./gen_App_reactGen.go:50:11: invalid operation: a == val.(AppState) (struct containing map[string]string cannot be compared)
./gen_App_reactGen.go:64:11: invalid operation: a == val.(AppProps) (struct containing []string cannot be compared)

I can confirm that using reflect.DeepEqual(b, val) fixes the issue.

Just out of curiosity, as I'm big Go fan but new to react and learning about react and react native: Is this library meant to be compatible with the native version too? Thanks!

I ran the Hello world example/tutorial with age state.

In the React Developer Tools it doesn't elegantly show the state as it does for a "normal" react applications. It's hard to find the "age" state. You have to dig deep.

I am using React Developer Tools 3.3.1

There is something wrong with my project.

func (a SampleDef) Render() react.Element {
	return react.Div(nil,
		react.Input(&react.InputProps{
			Type: "text",
		}),
	)
}

It seems generated

<div><input type="text" aria-expanded="false" aria-haspopup="false" aria-labelledby="" class="" placeholder="" role="" value=""></div>

1. Why so many no use attribute under input tag.
2. can not input anything and don't work with chrome.

Following a question asked by email, need to introduce support for aria-* attributes.

I think we need to follow this definition:

https://www.w3.org/TR/wai-aria-1.1/#state_prop_def

Unclear where/how such attributes can be used, or whether they can be applied to all elements.

Help on that question very much appreciated.

Depends on gopherjs/gopherjs#779

materializecss is prob the number 1 alternative to bootstrap. It's 100% jquery free too.

https://materializecss.com/

I tried to write tests in combination with this package. I tired with this minimal file (react_test.go):

package testreact

import (
	"testing"

	_ "myitcv.io/react"
)

func TestReact(t *testing.T) {
	t.Log("OK")
}

If I execute go test ., the following output is given:

panic: runtime error: invalid memory address or nil pointer dereference
[signal SIGSEGV: segmentation violation code=0x1 addr=0x0 pc=0x4e6082]

goroutine 1 [running]:
github.com/gopherjs/gopherjs/js.(*Object).Get(0x0, 0x5311e3, 0x5, 0xc4200543e0)
	/home/lubr/code/go/src/github.com/gopherjs/gopherjs/js/js.go:32 +0x22
FAIL	github.com/breml/reacttest/test	0.003s

If I use gopherjs tes ., then the output is:

gopherjs: Source maps disabled. Install source-map-support module for nice stack traces. See https://github.com/gopherjs/gopherjs#gopherjs-run-gopherjs-test.
/home/lubr/code/go/src/github.com/breml/reacttest/test/test.629576433:24995
var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,l,u=r(e),c=1;c<arguments.length;c++){n=Object(arguments[c]);for(var s in n)a.call(n,s)&&(u[s]=n[s]);if(o){l=o(n);for(var f=0;f<l.length;f++)i.call(n,l[f])&&(u[l[f]]=n[l[f]])}}return u}},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r

ReferenceError: window is not defined
    at Object.t (/home/lubr/code/go/src/github.com/breml/reacttest/test/test.629576433:24995:1138)
    at t (/home/lubr/code/go/src/github.com/breml/reacttest/test/test.629576433:24990:146)
    at /home/lubr/code/go/src/github.com/breml/reacttest/test/test.629576433:24990:503
    at /home/lubr/code/go/src/github.com/breml/reacttest/test/test.629576433:24990:512
    at Object.<anonymous> (/home/lubr/code/go/src/github.com/breml/reacttest/test/test.629576433:25012:5)
    at Object.<anonymous> (/home/lubr/code/go/src/github.com/breml/reacttest/test/test.629576433:35738:4)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:442:10)
    at startup (node.js:136:18)
    at node.js:966:3
FAIL	github.com/breml/reacttest/test	0.299s

i am amazed at how far you have taken this. Really impressive and useful. Hats off and looking forward to kicking the tires.

Some newbie stuff.

• the install client side is big. Is there are support of the PRPL pattern / Lazy load yet ?

• Themes. Yes i know its lame, but well was wondering... Material Design maybe ?

After reading the examples of import external Javascript library.
I have found out that all example is so simple.

Just import global function from javascript declare in go.

https://github.com/myitcv/highlightjs
https://github.com/myitcv/remarkable

But in real word project development.
Some react library in NPM maybe very useful.

something like :
https://material-ui.com/
https://ant.design/
https://rsuitejs.com/

I have already read the component code in the library.
But I have no idea how to export the library react component to my go project.

Please help or some suggestions approach my purpose.

stateGen looks like the beginnings of something like Redux.

Would it be possible/are you planning to extend stateGen to support more of the Redux pieces like the reducers and maybe middleware too? Something reducer like would be incredibly handy.

Related to #28 but not dependent on it; this issue is relevant so long as github.com/myitcv/gopherjs/react continues to offer the option of bundling React's .js files

Picking up on discussion in gopherjs/gopherjs#611, specifically from this comment

Facebook have two versions of the React .js files:

• development - has some extra runtime warnings/checks etc to warn against probably incorrect behaviour (they mainly have to do this at runtime because there are no static analysis tools that can achieve this)
• production - no additional sanity checks

The development version is somewhat analogous in my mind to the race detector mode of the Go toolchain.

We currently (as of f51106b) bundle the prod version by default; the development version is enabled via --tags debug.

As the Facebook docs make clear, the runtime behaviour of these two versions is different.

The question is: should we provide the option of bundling one vs the other?

Points to consider:

• The runtime behaviour is, as stated, different between the two. This is a negative
• Without static analysis tools these checks currently provide a useful check (for example it catches cases where you try and nest <p> elements)
• ...

Firstly, thanks very much for your work on these react bindings - they've been great so far!

I encountered an issue while trying to use the simpler and much more expressive jsx.HTML, introduced by #64, instead of needing to construct all elements using chained functions. To my knowledge the following examples are logically equivalent, yet one renders correctly using jsx.HTML while the other fails to emit the html elements.

Example which succeeds:

func (c NavbarDef) Render() react.Element {
	return react.Div(nil, jsx.HTML(`
		<nav><ul><li>
			Testing
		</li></ul></nav>
	`)...)
}

Example which fails:

func (c NavbarDef) Render() react.Element {
	return react.Div(nil, jsx.HTML(`
		<nav><ul><li>Testing</li>
		</ul></nav>
	`)...)
}

My initial thought is potentially an issue with incorrect newline handling?

I'm planning to make all of my Go code hosted on Github vgo-compatible and in the process switch to a mono-repo.

Rough plan at the moment is:

• house all myitcv.io/... packages in a mono-repo at https://github.com/myitcv/x
• have multiple modules within the mono-repo, myitcv.io/react being one of them
• drop the _vendor dir, and instead have a reference "cache"/"proxy" in a separate repo that will be used by developers of the code (not users)
• categorise issues/PRs in much the same way as the Go project does, e.g. myitcv.io/react issues would be prefixed by react, react/cmd/reactGen etc

Any one have any thoughts/concerns with this?

cc @mpl

Is there a reason why this event isn't mapped ?
What is the way to create Ajax Form then ?
(i.e: prevent the default submit post-refresh thing)
Thanks