Skip to content

Commit b9a2347

Browse files
author
Cause Chung
authored
Merge pull request #3 from cuzfrog/styled-tags
Styled tags
2 parents ee39c2d + 9c5eccc commit b9a2347

File tree

20 files changed

+1730
-4
lines changed

20 files changed

+1730
-4
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ npm-debug.log
3232

3333

3434
#project
35+
incubation/assets/

‎README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,39 @@
11
# VDOM
2+
3+
### New styled tags' features:
4+
5+
1. Type safety. Tags and attributes are `object`s, which have static types.
6+
2. Compatible with Intellij IDEA editor. No highlighting error if correct.
7+
3. Almost no performance penalty. Codes are generated by macro.
8+
9+
### Dependency:
10+
11+
"scalajs-react-interface" %%% "vdom" % "version"
12+
13+
### How to use:
14+
```scala
15+
import sri.web.styledtagsPrefix_<^._ //recommended for avioding name conflicts.
16+
//tags begin with `<`, attributes begin with `^`
17+
//or
18+
import sri.web.styledtags._
19+
//you still have type safety.
20+
```
21+
22+
#### example:
23+
```scala
24+
import sri.core._
25+
import sri.web.styledtagsPrefix_<^._
26+
27+
<.div()("Only contents.")
28+
<.div(^.value := "some value")("Contents with value")
29+
<.div()(
30+
"Has child:",
31+
<.p(^.value := "v1")("I'm a child <p>")
32+
)
33+
<.a(
34+
^.onClick := ((e: ReactEventI) => println("this is a callback"))
35+
)("Click me will log something.")
36+
//note := is a method, when pass complicated code in, you need give them parentheses.
37+
```
38+
39+
[Complete example](incubation/src/main/scala/sri/web/template/components/StyledTagsComTest.scala)

‎build.sbt‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
shellPrompt in ThisBuild := { state => Project.extract(state).currentRef.project + "> " }
12
name := "vdom"
23

34
//version := "2017.4.0-SNAPSHOT"
@@ -8,7 +9,7 @@ val scala211 = "2.11.11"
89

910
val scala212 = "2.12.2"
1011

11-
scalaVersion := scala211
12+
scalaVersion := scala212
1213

1314
crossScalaVersions := Seq(scala211, scala212)
1415

@@ -20,8 +21,11 @@ scalacOptions ++= Seq(
2021
)
2122

2223
//Dependencies
23-
libraryDependencies += "scalajs-react-interface" %%% "core" % "2017.3.26-beta" % Provided
24-
libraryDependencies += "scalajs-react-interface" %%% "universal" % "2017.4.9-beta" % Provided
24+
libraryDependencies ++= Seq(
25+
"org.scala-lang" % "scala-reflect" % scalaVersion.value % Provided,
26+
"scalajs-react-interface" %%% "core" % "2017.3.26-beta" % Provided,
27+
"scalajs-react-interface" %%% "universal" % "2017.4.9-beta" % Provided
28+
)
2529

2630
//bintray
2731
resolvers += Resolver.jcenterRepo
@@ -47,3 +51,11 @@ scalaJSStage in Global := FastOptStage
4751

4852
//Tasks:
4953
Tasks.taskSettings
54+
55+
//Integration Incubation and Test Project:
56+
import IntegrationProjectsSettings._
57+
val vdom = project in file(".")
58+
val incubationMacros = (project in file("./macros"))
59+
.settings(commonSettings,macrosSettings).enablePlugins(ScalaJSPlugin).dependsOn(vdom)
60+
val incubation = (project in file("./incubation"))
61+
.settings(commonSettings,incubationSettings).enablePlugins(ScalaJSPlugin).dependsOn(incubationMacros)

‎incubation/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# sri-vdom-incubation
2+
3+
This is a sub project of **vdom**
4+
5+
## How to Run
6+
7+
```scala
8+
9+
sbt ~fastOptJS
10+
11+
//open new terminal
12+
13+
npm install
14+
15+
npm start
16+
17+
//open http://localhost:8090/ in browser
18+
19+
```
20+
21+
### scalatags-like Styled Tags
22+
23+
```scala
24+
import sri.core._
25+
import sri.macros.web.styledtagsPrefix_<^._
26+
27+
def render(): ReactElement = <.div(
28+
^.className := "some",
29+
^.value := "asdf"
30+
)(
31+
<.p()("This is generated by styled tags."),
32+
<.input(
33+
^.onClick := onTextChange _,
34+
^.value := props.getState().text
35+
)
36+
)
37+
```
38+
Compatible with Intellij IDEA.

‎incubation/index.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/html">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sri web template</title>
6+
<style>
7+
html {
8+
font-family: sans-serif;
9+
/* 1 */
10+
-ms-text-size-adjust: 100%;
11+
/* 2 */
12+
-webkit-text-size-adjust: 100%;
13+
/* 2 */
14+
}
15+
body {
16+
margin: 0;
17+
font-size: 13px;
18+
line-height: 20px;
19+
background:#ECEBEB;
20+
}
21+
22+
.react-root {
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
right: 0;
27+
bottom: 0;
28+
29+
box-sizing: border-box;
30+
display: -webkit-box;
31+
display: -webkit-flex;
32+
display: -ms-flexbox;
33+
display: flex;
34+
-webkit-box-orient: vertical;
35+
-webkit-box-direction: normal;
36+
-webkit-flex-direction: column;
37+
-ms-flex-direction: column;
38+
flex-direction: column;
39+
40+
}
41+
.react-root .react-view {
42+
position: relative;
43+
44+
box-sizing: border-box;
45+
display: -webkit-box;
46+
display: -webkit-flex;
47+
display: -ms-flexbox;
48+
display: flex;
49+
-webkit-box-orient: vertical;
50+
-webkit-box-direction: normal;
51+
-webkit-flex-direction: column;
52+
-ms-flex-direction: column;
53+
flex-direction: column;
54+
55+
}
56+
57+
</style>
58+
</head>
59+
<body>
60+
61+
<div id="app" class="react-root"></div>
62+
63+
64+
<script type="text/javascript" src="assets/mainpage-bundle.js"></script>
65+
66+
</body>
67+
</html>

‎incubation/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "sri-web-template",
3+
"version": "0.6.0",
4+
"description": "sri web template project",
5+
"repository": {
6+
"type": "git",
7+
"url": ""
8+
},
9+
"scripts": {
10+
"start": "webpack & webpack-dev-server --progress --colors --port 8090 --history-api-fallback",
11+
"build": "webpack --config webpack.config.prod.js"
12+
},
13+
"devDependencies": {
14+
"babel": "5.8.21",
15+
"babel-loader": "5.3.2",
16+
"compression-webpack-plugin": "^0.2.0",
17+
"css-loader": "^0.14.5",
18+
"file-loader": "^0.8.4",
19+
"image-webpack-loader": "^1.6.1",
20+
"lodash": "^3.9.3",
21+
"node-libs-browser": "^0.5.2",
22+
"style-loader": "^0.12.3",
23+
"url-loader": "^0.5.6",
24+
"webpack": "^1.12.13",
25+
"webpack-dev-server": "^1.14.1"
26+
},
27+
"dependencies": {
28+
"history": "4.4.0",
29+
"react": "15.4.1",
30+
"react-dom": "15.4.1"
31+
}
32+
}

‎incubation/src/main/scala/sri/web/template/WebApp.scala‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
package sri.web.template
2+
3+
import org.scalajs.dom
4+
import sri.web.ReactDOM
5+
import sri.web.template.components.{StyledTagsComTest}
6+
import sri.web.template.styles.AppStyles
7+
8+
import scala.scalajs.js.JSApp
9+
import scala.util.Random
10+
11+
object WebApp extends JSApp {
12+
13+
def main(): Unit = {
14+
AppStyles.load()
15+
ReactDOM.render(StyledTagsComTest(), dom.document.getElementById("app"))
16+
println("[info] Client rendering completed." + Random.nextInt())
17+
}
18+
19+
}

‎incubation/src/main/scala/sri/web/template/components/HomeScreen.scala‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
//package sri.web.template.components
2+
//
3+
//import org.scalajs.dom
4+
//import sri.core._
5+
//import sri.web.template.styles.GlobalStyle
6+
//import sri.web.vdom.tags._
7+
//import sri.scalacss.Defaults._
8+
//import sri.web.vdom.{CreateDOMElement, DOMProps, SyntheticEvent}
9+
//
10+
//import scala.scalajs.js.annotation.ScalaJSDefined
11+
//import scala.scalajs.js
12+
//
13+
//@ScalaJSDefined
14+
//trait A extends js.Object
15+
//
16+
//@ScalaJSDefined
17+
//class HomeScreen extends ComponentS[HomeScreen.State] {
18+
//
19+
// import HomeScreen._
20+
//
21+
// initialState(State("sri"))
22+
//
23+
// def render() = {
24+
// div(className = GlobalStyle.flexOneAndCenter)(
25+
// span(className = GlobalStyle.bigText)("Home Screen"),
26+
// input(value = state.text, onChange = onTextChange _),
27+
// input2
28+
// //StyledTagsComTest(StyledTagsComTest.Props(() => state, _setState))
29+
// )
30+
// }
31+
//
32+
// def _setState(s: State): Unit = setState(_ => s)
33+
//
34+
//
35+
// val input2 = CreateDOMElement("input", attr)
36+
// def attr = {
37+
// val domProps = new A {
38+
// val className = "some class name4"
39+
// val value = state.text
40+
// val onChange: js.UndefOr[js.Function1[_ <: SyntheticEvent[_], _]] =
41+
// js.UndefOr.any2undefOrA((e: ReactEventI) => ())
42+
// }
43+
// dom.window.console.dir(domProps)
44+
// domProps
45+
// }
46+
//
47+
//
48+
// def onTextChange(e: ReactEventI) = {
49+
// val value = e.target.value
50+
// dom.window.console.log(value)
51+
// setState((state: State) => state.copy(text = value))
52+
// }
53+
//}
54+
//
55+
//object HomeScreen {
56+
//
57+
// case class State(text: String)
58+
//
59+
// def apply() = CreateElementNoProps[HomeScreen]()
60+
//
61+
//}

‎incubation/src/main/scala/sri/web/template/components/StyledTagsComTest.scala‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
package sri.web.template.components
2+
3+
import org.scalajs.dom
4+
import sri.core._
5+
import sri.scalacss.Defaults._
6+
import sri.web.styledtagsPrefix_<^._
7+
import sri.web.template.styles.GlobalStyle
8+
9+
import scala.scalajs.js.annotation.ScalaJSDefined
10+
11+
@ScalaJSDefined
12+
private class StyledTagsComTest extends ComponentS[State] {
13+
initialState(State("sri"))
14+
override def render(): ReactElement = test
15+
def onTextChange(e: ReactEventI) = {
16+
val value = e.target.value
17+
dom.window.console.log(value)
18+
setState(_.copy(text = value))
19+
}
20+
private def test1 = <.div()("Only contents.")
21+
private def test2 = <.div(^.value := "some value")("Contents with value")
22+
private def test3 = <.div(^.value := "some value")(
23+
"Has child:",
24+
<.p(^.value := "v1")("I'm a child <p>")
25+
)
26+
private def test4 = <.a(
27+
^.onClick := ((e: ReactEventI) => println("something1"))
28+
)("Click me will log something.")
29+
30+
private def test = <.div(
31+
^.key := 3,
32+
^.ref := ((n: dom.Node) => n),
33+
^.className := GlobalStyle.flexOneAndCenter
34+
)(
35+
<.p()("This is generated by styled tags."),
36+
<.input(
37+
^.onChange := onTextChange _,
38+
^.value := state.text
39+
),
40+
<.button(^.onClick := ((e: ReactEvent) => setState(_ => State(""))))("Click me to clear.")
41+
)
42+
43+
}
44+
case class State(text: String)
45+
object StyledTagsComTest {
46+
def apply(): ReactElement = CreateElementNoProps[StyledTagsComTest]()
47+
}

‎incubation/src/main/scala/sri/web/template/styles/AppStyles.scala‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
package sri.web.template.styles
2+
3+
import scalacss.Defaults._
4+
import scalacss.internal.mutable.GlobalRegistry
5+
6+
object AppStyles {
7+
8+
def load() = {
9+
GlobalRegistry.register(GlobalStyle)
10+
GlobalRegistry.addToDocumentOnRegistration()
11+
}
12+
}

0 commit comments

Comments
 (0)