-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from cuzfrog/styled-tags
Styled tags
- Loading branch information
Showing
20 changed files
with
1,730 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -32,3 +32,4 @@ npm-debug.log | |
|
|
||
|
|
||
| #project | ||
| incubation/assets/ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,39 @@ | ||
| # VDOM | ||
|
|
||
| ### New styled tags' features: | ||
|
|
||
| 1. Type safety. Tags and attributes are `object`s, which have static types. | ||
| 2. Compatible with Intellij IDEA editor. No highlighting error if correct. | ||
| 3. Almost no performance penalty. Codes are generated by macro. | ||
|
|
||
| ### Dependency: | ||
|
|
||
| "scalajs-react-interface" %%% "vdom" % "version" | ||
|
|
||
| ### How to use: | ||
| ```scala | ||
| import sri.web.styledtagsPrefix_<^._ //recommended for avioding name conflicts. | ||
| //tags begin with `<`, attributes begin with `^` | ||
| //or | ||
| import sri.web.styledtags._ | ||
| //you still have type safety. | ||
| ``` | ||
|
|
||
| #### example: | ||
| ```scala | ||
| import sri.core._ | ||
| import sri.web.styledtagsPrefix_<^._ | ||
|
|
||
| <.div()("Only contents.") | ||
| <.div(^.value := "some value")("Contents with value") | ||
| <.div()( | ||
| "Has child:", | ||
| <.p(^.value := "v1")("I'm a child <p>") | ||
| ) | ||
| <.a( | ||
| ^.onClick := ((e: ReactEventI) => println("this is a callback")) | ||
| )("Click me will log something.") | ||
| //note := is a method, when pass complicated code in, you need give them parentheses. | ||
| ``` | ||
|
|
||
| [Complete example](incubation/src/main/scala/sri/web/template/components/StyledTagsComTest.scala) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| # sri-vdom-incubation | ||
|
|
||
| This is a sub project of **vdom** | ||
|
|
||
| ## How to Run | ||
|
|
||
| ```scala | ||
|
|
||
| sbt ~fastOptJS | ||
|
|
||
| //open new terminal | ||
|
|
||
| npm install | ||
|
|
||
| npm start | ||
|
|
||
| //open http://localhost:8090/ in browser | ||
|
|
||
| ``` | ||
|
|
||
| ### scalatags-like Styled Tags | ||
|
|
||
| ```scala | ||
| import sri.core._ | ||
| import sri.macros.web.styledtagsPrefix_<^._ | ||
|
|
||
| def render(): ReactElement = <.div( | ||
| ^.className := "some", | ||
| ^.value := "asdf" | ||
| )( | ||
| <.p()("This is generated by styled tags."), | ||
| <.input( | ||
| ^.onClick := onTextChange _, | ||
| ^.value := props.getState().text | ||
| ) | ||
| ) | ||
| ``` | ||
| Compatible with Intellij IDEA. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <!DOCTYPE html> | ||
| <html xmlns="http://www.w3.org/1999/html"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Sri web template</title> | ||
| <style> | ||
| html { | ||
| font-family: sans-serif; | ||
| /* 1 */ | ||
| -ms-text-size-adjust: 100%; | ||
| /* 2 */ | ||
| -webkit-text-size-adjust: 100%; | ||
| /* 2 */ | ||
| } | ||
| body { | ||
| margin: 0; | ||
| font-size: 13px; | ||
| line-height: 20px; | ||
| background:#ECEBEB; | ||
| } | ||
|
|
||
| .react-root { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
|
|
||
| box-sizing: border-box; | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-box-direction: normal; | ||
| -webkit-flex-direction: column; | ||
| -ms-flex-direction: column; | ||
| flex-direction: column; | ||
|
|
||
| } | ||
| .react-root .react-view { | ||
| position: relative; | ||
|
|
||
| box-sizing: border-box; | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-box-direction: normal; | ||
| -webkit-flex-direction: column; | ||
| -ms-flex-direction: column; | ||
| flex-direction: column; | ||
|
|
||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div id="app" class="react-root"></div> | ||
|
|
||
|
|
||
| <script type="text/javascript" src="assets/mainpage-bundle.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| { | ||
| "name": "sri-web-template", | ||
| "version": "0.6.0", | ||
| "description": "sri web template project", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "" | ||
| }, | ||
| "scripts": { | ||
| "start": "webpack & webpack-dev-server --progress --colors --port 8090 --history-api-fallback", | ||
| "build": "webpack --config webpack.config.prod.js" | ||
| }, | ||
| "devDependencies": { | ||
| "babel": "5.8.21", | ||
| "babel-loader": "5.3.2", | ||
| "compression-webpack-plugin": "^0.2.0", | ||
| "css-loader": "^0.14.5", | ||
| "file-loader": "^0.8.4", | ||
| "image-webpack-loader": "^1.6.1", | ||
| "lodash": "^3.9.3", | ||
| "node-libs-browser": "^0.5.2", | ||
| "style-loader": "^0.12.3", | ||
| "url-loader": "^0.5.6", | ||
| "webpack": "^1.12.13", | ||
| "webpack-dev-server": "^1.14.1" | ||
| }, | ||
| "dependencies": { | ||
| "history": "4.4.0", | ||
| "react": "15.4.1", | ||
| "react-dom": "15.4.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| package sri.web.template | ||
|
|
||
| import org.scalajs.dom | ||
| import sri.web.ReactDOM | ||
| import sri.web.template.components.{StyledTagsComTest} | ||
| import sri.web.template.styles.AppStyles | ||
|
|
||
| import scala.scalajs.js.JSApp | ||
| import scala.util.Random | ||
|
|
||
| object WebApp extends JSApp { | ||
|
|
||
| def main(): Unit = { | ||
| AppStyles.load() | ||
| ReactDOM.render(StyledTagsComTest(), dom.document.getElementById("app")) | ||
| println("[info] Client rendering completed." + Random.nextInt()) | ||
| } | ||
|
|
||
| } |
61 changes: 61 additions & 0 deletions
61
incubation/src/main/scala/sri/web/template/components/HomeScreen.scala
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| //package sri.web.template.components | ||
| // | ||
| //import org.scalajs.dom | ||
| //import sri.core._ | ||
| //import sri.web.template.styles.GlobalStyle | ||
| //import sri.web.vdom.tags._ | ||
| //import sri.scalacss.Defaults._ | ||
| //import sri.web.vdom.{CreateDOMElement, DOMProps, SyntheticEvent} | ||
| // | ||
| //import scala.scalajs.js.annotation.ScalaJSDefined | ||
| //import scala.scalajs.js | ||
| // | ||
| //@ScalaJSDefined | ||
| //trait A extends js.Object | ||
| // | ||
| //@ScalaJSDefined | ||
| //class HomeScreen extends ComponentS[HomeScreen.State] { | ||
| // | ||
| // import HomeScreen._ | ||
| // | ||
| // initialState(State("sri")) | ||
| // | ||
| // def render() = { | ||
| // div(className = GlobalStyle.flexOneAndCenter)( | ||
| // span(className = GlobalStyle.bigText)("Home Screen"), | ||
| // input(value = state.text, onChange = onTextChange _), | ||
| // input2 | ||
| // //StyledTagsComTest(StyledTagsComTest.Props(() => state, _setState)) | ||
| // ) | ||
| // } | ||
| // | ||
| // def _setState(s: State): Unit = setState(_ => s) | ||
| // | ||
| // | ||
| // val input2 = CreateDOMElement("input", attr) | ||
| // def attr = { | ||
| // val domProps = new A { | ||
| // val className = "some class name4" | ||
| // val value = state.text | ||
| // val onChange: js.UndefOr[js.Function1[_ <: SyntheticEvent[_], _]] = | ||
| // js.UndefOr.any2undefOrA((e: ReactEventI) => ()) | ||
| // } | ||
| // dom.window.console.dir(domProps) | ||
| // domProps | ||
| // } | ||
| // | ||
| // | ||
| // def onTextChange(e: ReactEventI) = { | ||
| // val value = e.target.value | ||
| // dom.window.console.log(value) | ||
| // setState((state: State) => state.copy(text = value)) | ||
| // } | ||
| //} | ||
| // | ||
| //object HomeScreen { | ||
| // | ||
| // case class State(text: String) | ||
| // | ||
| // def apply() = CreateElementNoProps[HomeScreen]() | ||
| // | ||
| //} |
47 changes: 47 additions & 0 deletions
47
incubation/src/main/scala/sri/web/template/components/StyledTagsComTest.scala
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| package sri.web.template.components | ||
|
|
||
| import org.scalajs.dom | ||
| import sri.core._ | ||
| import sri.scalacss.Defaults._ | ||
| import sri.web.styledtagsPrefix_<^._ | ||
| import sri.web.template.styles.GlobalStyle | ||
|
|
||
| import scala.scalajs.js.annotation.ScalaJSDefined | ||
|
|
||
| @ScalaJSDefined | ||
| private class StyledTagsComTest extends ComponentS[State] { | ||
| initialState(State("sri")) | ||
| override def render(): ReactElement = test | ||
| def onTextChange(e: ReactEventI) = { | ||
| val value = e.target.value | ||
| dom.window.console.log(value) | ||
| setState(_.copy(text = value)) | ||
| } | ||
| private def test1 = <.div()("Only contents.") | ||
| private def test2 = <.div(^.value := "some value")("Contents with value") | ||
| private def test3 = <.div(^.value := "some value")( | ||
| "Has child:", | ||
| <.p(^.value := "v1")("I'm a child <p>") | ||
| ) | ||
| private def test4 = <.a( | ||
| ^.onClick := ((e: ReactEventI) => println("something1")) | ||
| )("Click me will log something.") | ||
|
|
||
| private def test = <.div( | ||
| ^.key := 3, | ||
| ^.ref := ((n: dom.Node) => n), | ||
| ^.className := GlobalStyle.flexOneAndCenter | ||
| )( | ||
| <.p()("This is generated by styled tags."), | ||
| <.input( | ||
| ^.onChange := onTextChange _, | ||
| ^.value := state.text | ||
| ), | ||
| <.button(^.onClick := ((e: ReactEvent) => setState(_ => State(""))))("Click me to clear.") | ||
| ) | ||
|
|
||
| } | ||
| case class State(text: String) | ||
| object StyledTagsComTest { | ||
| def apply(): ReactElement = CreateElementNoProps[StyledTagsComTest]() | ||
| } |
12 changes: 12 additions & 0 deletions
12
incubation/src/main/scala/sri/web/template/styles/AppStyles.scala
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| package sri.web.template.styles | ||
|
|
||
| import scalacss.Defaults._ | ||
| import scalacss.internal.mutable.GlobalRegistry | ||
|
|
||
| object AppStyles { | ||
|
|
||
| def load() = { | ||
| GlobalRegistry.register(GlobalStyle) | ||
| GlobalRegistry.addToDocumentOnRegistration() | ||
| } | ||
| } |
28 changes: 28 additions & 0 deletions
28
incubation/src/main/scala/sri/web/template/styles/GlobalStyle.scala
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| package sri.web.template.styles | ||
|
|
||
| import scalacss.Defaults._ | ||
|
|
||
| object GlobalStyle extends StyleSheet.Inline { | ||
|
|
||
| import dsl._ | ||
|
|
||
| val flexOneAndCenter = style( | ||
| display.flex, | ||
| flexDirection.column, | ||
| flex := "1", | ||
| alignItems.center, | ||
| justifyContent.center) | ||
|
|
||
| val vertical = style(display.flex, flexDirection.column) | ||
|
|
||
| val horizontal = style(display.flex, flexDirection.row) | ||
|
|
||
| val flexOneAndDirectionRow = style(horizontal, flex := "1") | ||
|
|
||
| val flexOneAndDirectionVertical = style(vertical, flex := "1") | ||
|
|
||
|
|
||
| val bigText = style(fontWeight._500, | ||
| fontSize(1.5.em)) | ||
|
|
||
| } |
Oops, something went wrong.