amotify 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",

package/src/@global.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as ReactRouterDOM from 'react-router-dom';
-import { baseElements } from './launch';
+import { launchID } from './@variables';
 
-import { LaunchReactApplication } from './global/LaunchReactApplication';
+import {
+  LaunchReactApplication,
+  LaunchSubApplication
+} from './global/LaunchReactApplication';
 
-export { baseElements }
+export { launchID }
 const Inmemory: {
   [ key: string ]: {
     privateKey?: string
@@ -141,5 +144,6 @@ export {
   useStore,
   useRecycle,
   StyleConverter,
-  LaunchReactApplication
+  LaunchReactApplication,
+  LaunchSubApplication
 }

package/src/@styles/init.scss

@@ -27,6 +27,9 @@ html {
   transition: opacity $animation-time-middle;
   background-color: $color-dark;
 }
+amotify-app {
+  all: initial !important;
+}
 .AMOTIFY_be_origin {
   max-width: 200rem;
   min-height: $viewHeight;

package/src/config.tsx

@@ -28,7 +28,10 @@ export const deviceIdentifier = () => {
 }
 
 
-import { ColorKeys } from './@variables';
+import {
+  launchID,
+  ColorKeys
+} from './@variables';
 
 export const SetThemeColorTag = () => {
   let hex = '#45515c';
@@ -62,6 +65,7 @@ ColorKeys.forEach( ( key ) => {
 
 export const defaultConfig: amotify.config.Methods = {
   version: Version,
+  launchID,
   tone: 'default',
   darkMode: 'light',
   themeColor: 'comun',

package/src/functions/Loader/parts.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
-  baseElements,
-  LaunchReactApplication,
+  launchID,
+  LaunchSubApplication,
   useStore
 } from '@global';
 
@@ -92,9 +92,9 @@ const Loader: amotify.fn.Loader.Methods = {
 }
 export { Loader }
 
-LaunchReactApplication( {
+LaunchSubApplication( {
   isRoot: false,
-  baseElement: '#' + baseElements.loaderID,
+  baseElement: '#' + launchID + ' .AMOTIFY_be_loader',
   reactElement: <>
     <Top />
     <Corner />

package/src/functions/Sheet/parts.tsx

@@ -1,7 +1,7 @@
 import {
-  baseElements,
+  launchID,
   React,
-  LaunchReactApplication,
+  LaunchSubApplication,
   useStore
 } from '@global';
 import {
@@ -68,10 +68,10 @@ const Comps = {
       created_at: $.Time()
     }
 
-    $( '#' + baseElements.sheetID )
+    $( '#' + launchID + ' .AMOTIFY_be_sheet' )
       .append( `<div id="Sheet-${ params.sheetID }"></div>` )
       .callback( () => {
-        LaunchReactApplication( {
+        LaunchSubApplication( {
           isRoot: false,
           baseElement: '#Sheet-' + params.sheetID,
           reactElement: Content,
@@ -186,7 +186,7 @@ const Comps = {
               .abort()
               .addClass( style.FixHeight )
               .callback( () => {
-                $( '#' + baseElements.rootID + '.AMOTIFY_be_origin' )
+                $( '#' + launchID + ' .AMOTIFY_be_root' )
                   .addClass( style.FixScroll )
                 [ 0 ].scrollTop = Comps.mainSheetScrolls;
               } )
@@ -207,7 +207,7 @@ const Comps = {
             .removeClass( style.FixHeight )
             .callback( ( html ) => {
               html[ 0 ].scrollTop = Comps.mainSheetScrolls | 0;
-              $( '#' + baseElements.rootID )[ 0 ].scrollTop = 0;
+              $( '#' + launchID + ' .AMOTIFY_be_root' )[ 0 ].scrollTop = 0;
             } );
         }
       } );

package/src/functions/SnackBar/parts.tsx

@@ -1,6 +1,6 @@
 import {
-  baseElements,
-  LaunchReactApplication,
+  launchID,
+  LaunchSubApplication,
   useStore,
   React
 } from '@global';
@@ -205,9 +205,9 @@ const SnackBarsWrap: React.FC<{}> = () => {
   />;
 }
 
-LaunchReactApplication( {
+LaunchSubApplication( {
   isRoot: false,
-  baseElement: '#' + baseElements.snackbarID,
+  baseElement: '#' + launchID + ' .AMOTIFY_be_snackbar',
   reactElement: <SnackBarsWrap />,
   nonRouter: true
 } );

package/src/global/LaunchReactApplication.tsx

@@ -1,11 +1,13 @@
-import { baseElements } from '@global';
+import { launchID } from '@global';
 import React from 'react';
 import ReactDOMCLient from 'react-dom/client';
 import * as ReactRouterDom from 'react-router-dom';
 
-export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams = ( props ) => {
+export const LaunchSubApplication = ( props: amotify.global.LaunchReactApplicationInput & {
+  baseElement?: HTMLElement | string
+} ) => {
   let {
-    baseElement = '#' + baseElements.rootID,
+    baseElement = '#' + launchID + ' .AMOTIFY_be_root',
     reactElement,
     nonRouter = false,
     isRoot = true,
@@ -32,11 +34,38 @@ export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams
   if ( isRoot ) {
     $( 'body' ).addClass( 'AMOTIFY_be_body' );
     base.addClass( 'AMOTIFY_be AMOTIFY_be_root AMOTIFY_be_origin' );
-    if ( base[ 0 ].id ) {
-      baseElements.rootID = base[ 0 ].id;
-    } else {
-      base.setAttribute( 'id',baseElements.rootID );
-    }
+  }
+
+  ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> );
+}
+export const LaunchReactApplication = ( props: amotify.global.LaunchReactApplicationInput ) => {
+  let {
+    reactElement,
+    nonRouter = false,
+    isRoot = true,
+    appearances
+  } = props;
+  let base = $( '#' + launchID + ' .AMOTIFY_be_root' );
+  if ( !base[ 0 ] || !reactElement ) return;
+  if ( appearances ) {
+    let {
+      roundness,
+      tone,
+      themeColor,
+      darkMode
+    } = appearances;
+
+    if ( $.is.exist( roundness ) ) amotify.config.update.roundness( roundness! );
+    if ( $.is.exist( tone ) ) amotify.config.update.tone( tone! );
+    if ( $.is.exist( themeColor ) ) amotify.config.update.themeColor( themeColor! );
+    if ( $.is.exist( darkMode ) ) amotify.config.update.darkMode( darkMode! );
+  }
+
+  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
+
+  if ( isRoot ) {
+    $( 'body' ).addClass( 'AMOTIFY_be_body' );
+    base.addClass( 'AMOTIFY_be AMOTIFY_be_root AMOTIFY_be_origin' );
   }
 
   ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> );

package/src/launch.tsx

@@ -4,17 +4,17 @@ import '../@types/_';
 if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
 
 import { launchID } from './@variables';
-export const baseElements = {
-  rootID: 'ROOT_' + launchID,
-  loaderID: 'LOADER_' + launchID,
-  sheetID: 'SHEET_' + launchID,
-  snackbarID: 'SNACKBARS_' + launchID
-}
 
 let publicURI = 'https://public.comun.jp/';
 export { publicURI }
 import './preload';
 
+import {
+  deviceIdentifier,
+  defaultConfig,
+  SetThemeColorTag
+} from './config';
+
 import './@jsminAmotifyExtension/_';
 import {
   React,
@@ -65,12 +65,6 @@ import {
   Cropper,
 } from '@fn';
 
-import {
-  deviceIdentifier,
-  defaultConfig,
-  SetThemeColorTag
-} from './config';
-
 const amotify: amotify = {
   config: defaultConfig,
   global: {
@@ -87,13 +81,12 @@ const amotify: amotify = {
 }
 
 export { amotify }
-global.amotify = amotify;
-Object.freeze( global.amotify.atoms );
-Object.freeze( global.amotify.mols );
-Object.freeze( global.amotify.orgs );
-Object.freeze( global.amotify.temps );
-Object.freeze( global.amotify.fn );
-Object.freeze( global.amotify );
+
+if ( global.amotify ) {
+  global[ ( 'amotify_' + launchID ) as 'amotify' ] = amotify;
+} else {
+  global.amotify = amotify;
+}
 
 import './@styles/@app.scss';
 

package/src/preload.tsx

@@ -1,57 +1,59 @@
-import { baseElements } from './launch';
+import { launchID } from './@variables';
 
 let tags: Jsmin.CreateElement.Args[] = [
   {
-    tag: 'meta',parent: document.head,attr: {
+    tag: 'meta',
+    parent: document.head,
+    attr: {
       name: 'viewport',content: 'width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,viewport-fit=cover'
     },
   },{
-    tag: 'link',parent: document.head,attr: {
+    tag: 'link',
+    parent: document.head,
+    attr: {
       href: 'https://fonts.googleapis.com',rel: 'preconnect',async: true
     }
   },{
-    tag: 'link',parent: document.head,attr: {
+    tag: 'link',
+    parent: document.head,
+    attr: {
       href: 'https://fonts.gstatic.com',rel: 'preconnect',async: true
     }
   },
   {
-    tag: 'link',parent: document.head,attr: {
+    tag: 'link',
+    parent: document.head,
+    attr: {
       href: 'https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap',
       rel: 'stylesheet',
       async: true
     }
   },{
-    tag: 'link',parent: document.head,attr: {
+    tag: 'link',
+    parent: document.head,
+    attr: {
       href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;600&display=swap',
       rel: 'stylesheet',
       async: true
     }
   },{
-    tag: 'meta',parent: document.head,attr: {
-      name: 'theme-color',
-      content: '#45515c',
-    },
-    id: 'ThemeColorMetaTag'
-  },{
-    parent: document.body,
-    id: baseElements.sheetID,
-    className: 'AMOTIFY_be AMOTIFY_be_sheet',
-  },{
-    parent: document.body,
-    id: baseElements.snackbarID,
-    className: 'AMOTIFY_be AMOTIFY_be_snackbar',
-  },{
-    parent: document.body,
-    id: baseElements.loaderID,
-    className: 'AMOTIFY_be AMOTIFY_be_loader',
+    tag: 'meta',
+    parent: document.head,
+    id: 'ThemeColorMetaTag',
+    attr: { name: 'theme-color',content: '#45515c' },
   },{
     parent: document.body,
-    id: baseElements.rootID,
-    className: 'AMOTIFY_be AMOTIFY_be_root',
-  },
+    tag: 'amotify-app',
+    id: launchID,
+    html: `
+    <div class="AMOTIFY_be AMOTIFY_be_sheet"></div>
+    <div class="AMOTIFY_be AMOTIFY_be_snackbar"></div>
+    <div class="AMOTIFY_be AMOTIFY_be_loader"></div>
+    <div class="AMOTIFY_be AMOTIFY_be_root"></div>
+    `
+  }
 ];
 for ( let tag of tags ) {
-  let { id } = tag;
-  if ( id && $( '#' + id )[ 0 ] ) continue;
+  if ( tag.id && $( '#' + tag.id )[ 0 ] ) continue;
   $.createElement( tag );
 }