rescript parser WIP

Author: dielduarte

src/parser/.bsb.lock

@@ -0,0 +1 @@
+49528

src/parser/.merlin

@@ -0,0 +1,10 @@
+####{BSB GENERATED: NO EDIT
+FLG -ppx '/Users/dielduarte/localhost/animate-css-styled-components/src/parser/node_modules/rescript/darwin/bsc.exe -as-ppx '
+S /Users/dielduarte/localhost/animate-css-styled-components/src/parser/node_modules/rescript/lib/ocaml
+B /Users/dielduarte/localhost/animate-css-styled-components/src/parser/node_modules/rescript/lib/ocaml
+FLG -w +a-4-9-20-40-41-42-50-61-102
+S src
+B lib/bs/src
+S src/bindings
+B lib/bs/src/bindings
+####BSB GENERATED: NO EDIT}

src/parser/bsconfig.json

@@ -0,0 +1,17 @@
+{
+  "name": "your-project-name",
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    }
+  ],
+  "package-specs": [
+    {
+      "module": "commonjs",
+      "in-source": true
+    }
+  ],
+  "suffix": ".bs.js",
+  "bs-dependencies": []
+}

src/parser/package-lock.json

@@ -0,0 +1,20 @@
+{
+  "name": "parser",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "re:build": "rescript",
+    "re:start": "rescript build -w"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "rescript": "^9.1.2"
+  },
+  "dependencies": {
+    "css-tree": "^1.1.3"
+  }
+}

src/parser/package.json

@@ -0,0 +1,21 @@
+let generateAnimatedComponent = (~animationCode, ~componentName) => {
+  let result = "
+    import styled, { keyframes } from 'styled-components';
+    import BaseAnimation from '../BaseAnimation';
+
+    const ${componentName}Animation = keyframes`
+      ${animationCode}
+    `;
+
+    const ${componentName} = styled(BaseAnimation)`
+      animation-name: ${${componentName}Animation};
+    `;
+
+    export default ${componentName};
+  "
+
+  let replaceComponentName = Js.String.replaceByRe(%re("/\${componentName}/g"), componentName)
+  let replaceAnimationCode = Js.String.replaceByRe(%re("/\${animationCode}/g"), animationCode)
+
+  result->replaceComponentName->replaceAnimationCode
+}

src/parser/src/AnimatedComponent.bs.js

@@ -0,0 +1,15 @@
+type node = {
+  "type": string,
+  @set
+  "name": string,
+  "block": {"type": string, "children": array<string>},
+}
+
+@module("css-tree")
+external parse: string => 'a = "parse"
+
+@module("css-tree")
+external generate: 'a => string = "generate"
+
+@module("css-tree")
+external walk: ('a, node => unit) => unit = "walk"

src/parser/src/AnimatedComponent.res

@@ -0,0 +1,33 @@
+let ast = CssTree.parse("@keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInLeft {
+  animation-name: zoomInLeft;
+}")
+
+CssTree.walk(ast, node => {
+  if node["type"] === "Atrule" {
+    AnimatedComponent.generateAnimatedComponent(
+      ~animationCode=CssTree.generate(node["block"]),
+      ~componentName="NameOne",
+    )->Js.log
+  }
+})
+
+// @TODO
+// - get animation name
+// - get Animation extra styles
+// - import animation file
+// - script to clone animate css and read files
+// - script to generate a new animat-css-library version