@mexty/cli 1.8.2 → 1.9.1

package/dist/block-68f6a9dd608928af6fbea9ba/package.json

@@ -0,0 +1,34 @@
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "webpack --config webpack.config.js --mode production",
+    "preview": "vite preview",
+    "build:dev": "vite build"
+  },
+  "dependencies": {
+    "@mexty/block": "1.3.1",
+    "@mexty/realtime": "2.1.0",
+    "@react-three/drei": "^10.0.5",
+    "@react-three/fiber": "^9.1.0",
+    "@react-three/postprocessing": "^3.0.4",
+    "peerjs": "^1.5.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.174.0",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "css-loader": "^6.8.0",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.0",
+    "ts-loader": "^9.4.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.7",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.0",
+    "webpack-dev-server": "^4.15.0"
+  }
+}

package/dist/block-68f6a9dd608928af6fbea9ba/src/App.tsx

@@ -0,0 +1,45 @@
+// In your App.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {Block} from "./block";
+import './styles.css';
+
+interface MountAPI {
+  updateProps: (props: any) => void;
+  unmount: () => void;
+  getProps: () => any;
+}
+
+export function mount(container: HTMLElement, initialProps?: any): MountAPI {
+  const root = ReactDOM.createRoot(container);
+  let currentProps = initialProps || {};
+  
+  const App = () => {
+    const [props, setProps] = React.useState(currentProps);
+    
+    // Expose setProps to the API
+    React.useEffect(() => {
+      (window as any).__updateProps = setProps;
+    }, []);
+    
+    return <Block {...props} />;
+  };
+  
+  root.render(<App />);
+  
+  return {
+    updateProps: (newProps: any) => {
+      currentProps = { ...currentProps, ...newProps };
+      if ((window as any).__updateProps) {
+        (window as any).__updateProps(currentProps);
+      }
+    },
+    unmount: () => {
+      delete (window as any).__updateProps;
+      root.unmount();
+    },
+    getProps: () => currentProps
+  };
+}
+
+export default mount;

package/dist/block-68f6a9dd608928af6fbea9ba/src/block.tsx

@@ -0,0 +1,111 @@
+import React, { Suspense, useEffect, useRef } from "react";
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, useGLTF, useAnimations, Environment, Text, Html } from "@react-three/drei";
+import { EffectComposer, Bloom, LUT } from "@react-three/postprocessing";
+import * as THREE from "three";
+
+interface BlockProps {
+  title?: string;
+  description?: string;
+  modelPath?: string;
+  autoRotate?: boolean;
+  playAnimations?: boolean;
+  cameraPosition?: [number, number, number];
+}
+
+function CubeCascadeModel({ modelPath = "https://content.mext.app/block/quantum_cube.glb", playAnimations = true, ...props }) {
+  const group = useRef<THREE.Group>(null);
+  const { scene, animations } = useGLTF(modelPath);
+  const { actions, names } = useAnimations(animations, group);
+  
+  useEffect(() => {
+    if (actions && names.length > 0 && playAnimations) {
+      names.forEach((name) => {
+        const action = actions[name];
+        if (action) {
+          action.reset();
+          action.play();
+          action.setLoop(THREE.LoopRepeat, Infinity);
+        }
+      });
+    }
+    
+    return () => {
+      if (actions && names.length > 0) {
+        names.forEach((name) => {
+          const action = actions[name];
+          if (action) {
+            console.log(`Stopping animation: ${name}`);
+            action.stop();
+          }
+        });
+      }
+    };
+  }, [actions, names, playAnimations]);
+  
+  return (
+    <group ref={group} {...props}>
+      <primitive object={scene} />
+    </group>
+  );
+}
+
+function Scene({ autoRotate = true, playAnimations = true }: { autoRotate: boolean, playAnimations?: boolean }) {
+  return (
+    <>
+      <EffectComposer>
+        <Bloom mipmapBlur levels={9} intensity={4} luminanceThreshold={0.2} luminanceSmoothing={1} />
+      </EffectComposer>
+      <Suspense fallback={null}>
+        <CubeCascadeModel position={[0, 0, 0]} playAnimations={playAnimations} />
+      </Suspense>
+      <OrbitControls
+
+        enablePan={true}
+        enableZoom={true}
+        enableRotate={true}
+        autoRotate={autoRotate}
+        autoRotateSpeed={2}
+        maxPolarAngle={Math.PI / 2}
+        minDistance={3}
+        maxDistance={20}
+      />
+    </>
+  );
+}
+
+function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      <span className="ml-3 text-gray-600">Loading 3D Scene...</span>
+    </div>
+  );
+}
+
+export const Block: React.FC<BlockProps> = ({ 
+  autoRotate = true,
+  playAnimations = true,
+  cameraPosition = [10, 10, 10]
+}) => {
+  return (
+    <div className="relative w-screen h-screen">
+      <Canvas
+        camera={{ position: cameraPosition, fov: 90 }}
+        gl={{ antialias: true, alpha: true }}
+        className="w-full h-full"
+      >
+        <Suspense fallback={
+          <Html center>
+            <LoadingSpinner />
+          </Html>
+        }>
+          <Scene 
+            autoRotate={autoRotate}
+            playAnimations={playAnimations}
+          />
+        </Suspense>
+      </Canvas>
+    </div>
+  );
+};

package/dist/block-68f6a9dd608928af6fbea9ba/src/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { mount } from './App';
+
+// Use the mount function directly
+const container = document.getElementById('root')!;
+mount(container);

package/dist/block-68f6a9dd608928af6fbea9ba/src/styles.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0px;
+}
+
+/* Hidden class for soft delete functionality */
+.hidden {
+  display: none !important;
+}

package/dist/block-68f6a9dd608928af6fbea9ba/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "jsx": "react-jsx",
+    "declaration": false,
+    "outDir": "./dist"
+  },
+  "include": [
+    "**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/dist/block-68f6a9dd608928af6fbea9ba/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    open: true,
+    host: true,
+  },
+  build: {
+    sourcemap: true,
+  },
+  optimizeDeps: {
+    include: ['react', 'react-dom', '@react-three/fiber', '@react-three/drei', 'three'],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+  },
+});
+

package/dist/block-68f6a9dd608928af6fbea9ba/webpack.config.js

@@ -0,0 +1,59 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
+
+module.exports = {
+  mode: 'production',
+  entry: './src/index.tsx',
+  devtool: 'source-map',
+  devServer: {
+    port: 3001,
+    open: true,
+    hot: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(tsx?|jsx?)$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html',
+    }),
+    new ModuleFederationPlugin({
+      name: 'threescene',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Block': './src/App',
+      },
+      // CRITICAL: Empty object = no shared dependencies, full isolation
+      shared: {},
+    }),
+  ],
+  externals: {},
+  optimization: {
+    splitChunks: false,
+    concatenateModules: true,
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    library: {
+      type: 'var',
+      name: 'threescene'
+    },
+    publicPath: 'auto',
+  },
+};

package/dist/block-68f6aa43608928af6fbea9c9/.eslintrc

@@ -0,0 +1,14 @@
+{
+    "extends": "react-app",
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "no-unused-vars": [
+        "warn",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ]
+    }
+  }

package/dist/block-68f6aa43608928af6fbea9c9/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 200,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true
+}

package/dist/block-68f6aa43608928af6fbea9c9/README.md

@@ -0,0 +1,63 @@
+# Webpack Block Template
+
+This is a standardized template for creating Module Federation blocks in the MEXT system.
+
+## Features
+
+- 🔧 **Webpack 5** with Module Federation
+- ⚛️ **React 19** with TypeScript
+- 🎨 **CSS Loader** support
+- 🔥 **Hot Module Replacement** for development
+- 📦 **Independent Dependencies** - no sharing to avoid conflicts
+
+## Structure
+
+```
+src/
+├── index.tsx     # Entry point for development
+├── App.tsx       # Main component (exported as ./Block)
+└── ...          # Your custom components
+```
+
+## Development
+
+```bash
+npm install
+npm run dev      # Start development server on port 3001
+```
+
+## Build for Production
+
+```bash
+npm run build    # Creates dist/ with remoteEntry.js
+```
+
+## Module Federation
+
+This template exposes:
+- `./Block` → `./src/App` component
+
+The block can receive props from the host application:
+- `title?: string` - Custom title for the block
+- `data?: any` - Any data passed from the host
+
+## Usage as Federation Module
+
+```javascript
+// In host application
+const RemoteBlock = React.lazy(() => import('blockName/Block'));
+
+<RemoteBlock title="Custom Title" data={someData} />
+```
+
+## Customization
+
+1. Replace `src/App.tsx` with your custom component
+2. Add dependencies to `package.json`
+3. The backend will automatically use this template and inject your files
+
+## Important Notes
+
+- The `name` in `webpack.config.js` will be replaced automatically by the backend
+- All dependencies are bundled independently (no sharing)
+- CORS headers are configured for federation module loading 

package/dist/block-68f6aa43608928af6fbea9c9/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <title>Mexty Block</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>