bmdl-sdk 1.5.2 → 1.5.3

package/bin/dev.js

@@ -1,65 +1,66 @@
 #!/usr/bin/env node
 
 import { spawn } from 'child_process'
-import { existsSync } from 'fs'
-import { dirname, resolve } from 'path'
+import { resolve, dirname } from 'path'
 import { fileURLToPath } from 'url'
+import { existsSync } from 'fs'
 
-const __dirname = dirname(fileURLToPath(import.meta.url))
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 const projectRoot = process.cwd()
+const sdkRoot = resolve(__dirname, '..')
 
 console.log('🚀 BMDL SDK Development Server')
-console.log('📂 Project:', projectRoot)
+console.log('📂 Project root:', projectRoot)
+console.log('📦 SDK root:', sdkRoot)
 
-// Проверяем наличие необходимых файлов
+// Проверяем наличие необходимых файлов в проекте
 const requiredFiles = [
   'src/app/App.tsx',
   'src/config.ts',
   'src/dataOptions.ts',
-  'src/viewOptions.ts',
+  'src/viewOptions.ts'
 ]
 
-let hasErrors = false
+let missingFiles = []
 requiredFiles.forEach(file => {
-  const fullPath = resolve(projectRoot, file)
-  if (!existsSync(fullPath)) {
-    console.log(`⚠️  Missing: ${file}`)
-    hasErrors = true
+  if (!existsSync(resolve(projectRoot, file))) {
+    missingFiles.push(file)
   }
 })
 
-if (hasErrors) {
+if (missingFiles.length > 0) {
+  console.log('⚠️  Missing required files:')
+  missingFiles.forEach(file => console.log(`   - ${file}`))
   console.log('')
-  console.log('💡 Run "npx bmdl-sdk init" to create missing files')
+  console.log('💡 Run "npx bmdl-sdk init" to create the missing files')
 }
 
-// Запускаем Vite из SDK
-const sdkRoot = resolve(__dirname, '..')
-const viteConfig = resolve(sdkRoot, 'vite.config.ts')
-
 console.log('')
-console.log(`🔧 Starting Vite on port 3000...`)
-console.log(`📦 Serving from: ${sdkRoot}`)
-console.log(`📁 Watching project: ${projectRoot}`)
+console.log('🔧 Starting Vite development server...')
+console.log('🌐 http://localhost:3000')
 
-// Запускаем Vite с передачей корня проекта как переменной окружения
-const vite = spawn('npx', ['vite', '--port', '3000', '--config', viteConfig], {
+// Запускаем Vite из SDK с передачей PROJECT_ROOT
+const vite = spawn('npx', [
+  'vite',
+  '--port', '3000',
+  '--config', resolve(sdkRoot, 'vite.config.ts')
+], {
   stdio: 'inherit',
   shell: true,
   cwd: sdkRoot,
   env: {
     ...process.env,
-    PROJECT_ROOT: projectRoot,
-  },
+    PROJECT_ROOT: projectRoot
+  }
 })
 
-vite.on('close', code => {
+vite.on('close', (code) => {
   if (code !== 0) {
     console.log(`❌ Vite process exited with code ${code}`)
   }
   process.exit(code)
 })
 
-console.log('')
-console.log('✅ Development server running on http://localhost:3000')
-console.log('🔄 Hot reload enabled for all source files')
+console.log('✅ Development server is running!')
+console.log('🔄 Hot reload enabled')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bmdl-sdk",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "type": "module",
   "main": "index.js",
   "bin": {
@@ -18,8 +18,11 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.0.0",
-    "vite": "^4.0.0",
     "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "react-dom": "^19.2.7",
+    "vite": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1"
   }
 }

package/src/App.tsx

@@ -1,19 +1,14 @@
-import React, { useState, useEffect } from 'react'
-import ReactDOM from 'react-dom/client'
-
-// Интерфейсы для виджета
-interface WidgetProps {
-  dataOptions?: any
-  viewOptions?: any
-}
+import React, { useEffect, useState } from 'react'
+import { ComponentProps } from '..'
 
 // Интерфейс для динамического импорта виджета
 interface WidgetModule {
-  default: React.ComponentType<WidgetProps>
+  default: React.ComponentType<ComponentProps>
 }
 
 const App: React.FC = () => {
-  const [WidgetComponent, setWidgetComponent] = useState<React.ComponentType<WidgetProps> | null>(null)
+  const [WidgetComponent, setWidgetComponent] =
+    useState<React.ComponentType<ComponentProps> | null>(null)
   const [dataOptions, setDataOptions] = useState<any>(null)
   const [viewOptions, setViewOptions] = useState<any>(null)
   const [loading, setLoading] = useState(true)
@@ -24,8 +19,7 @@ const App: React.FC = () => {
     const loadWidget = async () => {
       try {
         // Динамически импортируем компонент из проекта разработчика
-        const widgetModule = await import('/src/App/App.tsx') as WidgetModule
-        const configModule = await import('/src/config.ts')
+        const widgetModule = (await import('/src/app/App.tsx')) as WidgetModule
         const dataOptionsModule = await import('/src/dataOptions.ts')
         const viewOptionsModule = await import('/src/viewOptions.ts')
 
@@ -45,7 +39,14 @@ const App: React.FC = () => {
 
   if (loading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+        }}
+      >
         <h2>Loading widget...</h2>
       </div>
     )
@@ -53,11 +54,20 @@ const App: React.FC = () => {
 
   if (error) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', flexDirection: 'column' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+          flexDirection: 'column',
+        }}
+      >
         <h2 style={{ color: 'red' }}>Error</h2>
         <p>{error}</p>
         <p style={{ fontSize: '14px', color: '#666' }}>
-          Make sure you have src/App/App.tsx, src/config.ts, src/dataOptions.ts, src/viewOptions.ts
+          Make sure you have src/App/App.tsx, src/config.ts, src/dataOptions.ts,
+          src/viewOptions.ts
         </p>
       </div>
     )
@@ -68,54 +78,103 @@ const App: React.FC = () => {
   }
 
   return (
-    <div style={{ display: 'flex', height: '100vh', fontFamily: 'Arial, sans-serif' }}>
+    <div
+      style={{
+        display: 'flex',
+        height: '100vh',
+        fontFamily: 'Arial, sans-serif',
+      }}
+    >
       {/* Левая половина - информация SDK */}
-      <div style={{ 
-        flex: 1, 
-        padding: '20px', 
-        backgroundColor: '#f0f4f8',
-        borderRight: '2px solid #ddd',
-        overflow: 'auto'
-      }}>
+      <div
+        style={{
+          flex: 1,
+          padding: '20px',
+          backgroundColor: '#f0f4f8',
+          borderRight: '2px solid #ddd',
+          overflow: 'auto',
+        }}
+      >
         <h2 style={{ marginTop: 0 }}>🔧 BMDL SDK Preview</h2>
-        <div style={{ backgroundColor: 'white', padding: '15px', borderRadius: '8px', marginBottom: '15px' }}>
+        <div
+          style={{
+            backgroundColor: 'white',
+            padding: '15px',
+            borderRadius: '8px',
+            marginBottom: '15px',
+          }}
+        >
           <h4>📊 Widget Info</h4>
-          <div id="widget-info">
+          <div id='widget-info'>
             {/* Информация будет добавлена из config.ts */}
           </div>
         </div>
-        <div style={{ backgroundColor: 'white', padding: '15px', borderRadius: '8px' }}>
+        <div
+          style={{
+            backgroundColor: 'white',
+            padding: '15px',
+            borderRadius: '8px',
+          }}
+        >
           <h4>📦 Data Options</h4>
-          <pre style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px', fontSize: '12px' }}>
+          <pre
+            style={{
+              background: '#f5f5f5',
+              padding: '10px',
+              borderRadius: '4px',
+              fontSize: '12px',
+            }}
+          >
             {JSON.stringify(dataOptions, null, 2)}
           </pre>
         </div>
-        <div style={{ backgroundColor: 'white', padding: '15px', borderRadius: '8px', marginTop: '15px' }}>
+        <div
+          style={{
+            backgroundColor: 'white',
+            padding: '15px',
+            borderRadius: '8px',
+            marginTop: '15px',
+          }}
+        >
           <h4>⚙️ View Options</h4>
-          <pre style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px', fontSize: '12px' }}>
+          <pre
+            style={{
+              background: '#f5f5f5',
+              padding: '10px',
+              borderRadius: '4px',
+              fontSize: '12px',
+            }}
+          >
             {JSON.stringify(viewOptions, null, 2)}
           </pre>
         </div>
         <div style={{ marginTop: '20px', fontSize: '12px', color: '#666' }}>
-          <p>💡 Edit src/App/App.tsx, src/dataOptions.ts, or src/viewOptions.ts to see changes</p>
+          <p>
+            💡 Edit src/App/App.tsx, src/dataOptions.ts, or src/viewOptions.ts
+            to see changes
+          </p>
         </div>
       </div>
 
       {/* Правая половина - виджет разработчика */}
-      <div style={{ 
-        flex: 1, 
-        padding: '20px',
-        backgroundColor: '#ffffff',
-        overflow: 'auto'
-      }}>
-        <h3 style={{ marginTop: 0 }}>📱 Your Widget</h3>
-        <div style={{ 
-          border: '2px dashed #ccc', 
-          borderRadius: '8px',
+      <div
+        style={{
+          flex: 1,
           padding: '20px',
-          minHeight: '400px'
-        }}>
-          <WidgetComponent 
+          backgroundColor: '#ffffff',
+          overflow: 'auto',
+        }}
+      >
+        <h3 style={{ marginTop: 0 }}>📱 Your Widget</h3>
+        <div
+          style={{
+            border: '2px dashed #ccc',
+            borderRadius: '8px',
+            padding: '20px',
+            minHeight: '400px',
+          }}
+        >
+          <WidgetComponent
             dataOptions={dataOptions}
             viewOptions={viewOptions}
           />
@@ -125,4 +184,4 @@ const App: React.FC = () => {
   )
 }
 
-export default App
+export default App

package/vite.config.ts

@@ -1,19 +1,25 @@
-import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
 
 export default defineConfig({
   plugins: [react()],
   server: {
     port: 3000,
     open: true,
+    watch: {
+      // Следим за изменениями в проекте разработчика
+      ignored: ['!**/node_modules/**']
+    }
   },
-  root: process.cwd(),
   resolve: {
     alias: {
-      '@': process.cwd(),
-    },
+      // Перенаправляем импорты из /src в проект разработчика
+      '/src': resolve(process.env.PROJECT_ROOT || process.cwd(), 'src')
+    }
   },
+  root: process.cwd(),
   optimizeDeps: {
-    include: ['react', 'react-dom'],
-  },
-})
+    include: ['react', 'react-dom']
+  }
+})