feat: react version

nolimits4web · Jun 21, 2021 · 1cd0139 · 1cd0139
1 parent f900d9a
commit 1cd0139
Show file tree

Hide file tree

Showing 25 changed files with 428 additions and 90 deletions.
diff --git a/.gitignore b/.gitignore
@@ -107,10 +107,10 @@ dist
 build/*.css
 build/*.less
 build/*.scss
-build/*.js
+build/**/*.js
 build/*.map
 package/*.css
 package/*.less
 package/*.scss
-package/*.js
+package/**/*.js
 package/*.map
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,6 @@
+let modules = process.env.MODULES || false;
+if (modules === 'esm' || modules === 'false') modules = false;
+
+module.exports = {
+  presets: [['@babel/preset-env', { modules, loose: true }]],
+};
diff --git a/babel.config.react.js b/babel.config.react.js
@@ -0,0 +1,6 @@
+let modules = process.env.MODULES || false;
+if (modules === 'esm' || modules === 'false') modules = false;
+
+module.exports = {
+  presets: ['@babel/preset-react', ['@babel/preset-env', { modules, loose: true }]],
+};
diff --git a/build/react/package.json b/build/react/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "mariko/react",
+  "private": true,
+  "type": "module",
+  "exports": "./mariko-react.esm.js",
+  "typings": "./mariko-react.d.ts",
+  "sideEffects": false
+}
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "watch:prod": "cross-env NODE_ENV=production node scripts/watch",
     "/*============ Playground ============*/": "============",
     "core": "npm run build:dev && concurrently --kill-others \"vite ./playground/core\" \"npm run watch:dev\" ",
+    "react": "npm run build:dev && concurrently --kill-others \"vite ./playground/react\" \"npm run watch:dev\"",
     "/*============ Tooling ============*/": "============",
     "prettier": "prettier \"**/*.+(js|json|scss|css|less|ts|svelte|jsx)\"",
     "format": "npm run prettier -- --write",

diff --git a/package/react/package.json b/package/react/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "mariko/react",
+  "private": true,
+  "type": "module",
+  "exports": "./mariko-react.esm.js",
+  "typings": "./mariko-react.d.ts",
+  "sideEffects": false
+}
diff --git a/playground/core/index.html b/playground/core/index.html
@@ -3,9 +3,8 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Mariko Core</title>
   <link rel="stylesheet" href="./main.css">
 </head>
 
@@ -28,9 +27,7 @@
       </div>
     </div>
   </div>
-
   <script type="module" src="./main.js"></script>
-
 </body>
 
 </html>
diff --git a/playground/react/App.jsx b/playground/react/App.jsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import Mariko from '../../build/react';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div className="container">
+      <p
+        style={{ position: 'absolute', left: 0, top: 0, zIndex: 1000 }}
+        onClick={() => setCount(count + 1)}
+      >
+        {count}
+      </p>
+      <Mariko className="mariko-banner" onEnter={() => console.log('enter', count)}>
+        <img className="mariko-banner-spacer" src="./i/mariko-bg.svg" alt="" />
+        <img data-mariko-offset="-4.5" src="./i/mariko-bg.svg" alt="" />
+        <img data-mariko-offset="-2.5" src="./i/mariko-mountains.svg" alt="" />
+        <img data-mariko-offset="0" src="./i/mariko-forest-back.svg" alt="" />
+        <img data-mariko-offset="2" src="./i/mariko-forest-mid.svg" alt="" />
+        <img data-mariko-offset="4" src="./i/mariko-forest-front.svg" alt="" />
+        <img data-mariko-offset="4.5" src="./i/mariko-logo-en.svg" alt="" />
+        <img data-mariko-offset="5" src="./i/mariko-logo-jp.svg" alt="" />
+      </Mariko>
+    </div>
+  );
+};
+
+export default App;
diff --git a/playground/react/i/mariko-bg.svg b/playground/react/i/mariko-bg.svg
diff --git a/playground/react/i/mariko-forest-back.svg b/playground/react/i/mariko-forest-back.svg
diff --git a/playground/react/i/mariko-forest-front.svg b/playground/react/i/mariko-forest-front.svg
diff --git a/playground/react/i/mariko-forest-mid.svg b/playground/react/i/mariko-forest-mid.svg
diff --git a/playground/react/i/mariko-logo-en.svg b/playground/react/i/mariko-logo-en.svg
diff --git a/playground/react/i/mariko-logo-jp.svg b/playground/react/i/mariko-logo-jp.svg
diff --git a/playground/react/i/mariko-mountains.svg b/playground/react/i/mariko-mountains.svg
diff --git a/playground/react/index.html b/playground/react/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mariko React</title>
+  <link rel="stylesheet" href="./main.css">
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.js"></script>
+</body>
+
+</html>
diff --git a/playground/react/main.css b/playground/react/main.css
@@ -0,0 +1,68 @@
+html,
+body {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  min-height: 100vh;
+}
+body {
+  background-image: linear-gradient(to bottom, #ad3ef5, #5814a2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.container {
+  padding: 0px 40px;
+  max-width: 960px;
+  margin: 32px auto;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+}
+.mariko-banner {
+  width: 100%;
+}
+.mariko-banner .mariko-inner {
+  border-radius: 10px;
+}
+.mariko-banner img {
+  position: absolute;
+  left: -5%;
+  top: -5%;
+  width: 110%;
+  height: 110%;
+  object-fit: contain;
+  display: block;
+  z-index: 1;
+  transform-style: preserve-3d;
+  pointer-events: none;
+}
+.mariko-banner img.mariko-banner-spacer {
+  position: relative;
+  width: 100%;
+  height: auto;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+}
+.mariko-banner .mariko-shadow {
+  filter: blur(50px);
+  opacity: 0.5;
+}
+.mariko-banner .mariko-highlight {
+  z-index: 100;
+}
+
+.mariko-banner-text {
+  position: absolute;
+  color: #fff;
+  font-weight: bold;
+  left: 0%;
+  top: 0%;
+}
+.mariko-active .mariko-banner-text {
+}
diff --git a/playground/react/main.js b/playground/react/main.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// eslint-disable-next-line
+import '../../build/mariko.css';
+
+import App from './App.jsx';
+
+// eslint-disable-next-line
+ReactDOM.render(React.createElement(App), document.getElementById('app'));