@alicloud/console-os-browser-vm 0.0.999-consoleBase

package/stories/index.stories.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import beautify from 'js-beautify';
+
+import { storiesOf } from '@storybook/react';
+
+import { createContext } from '../src/index';
+const context = createContext( { initURL: 'https://www.example.com/home' } );
+
+const RunCode = ( { title, code, context } ) =>
+  <div style={ { cssText: 'margin: 0 0 30px 0' } }>
+    <h3 style={ { cssText: 'margin: 5px 10px; font-size: 16px' } }>{ title }</h3>
+    <textarea readOnly={ true } value={ beautify.js( code ) } style={ { cssText: `width: 640px; height: ${ ( code.split( '\n' ).length - 2 ) * 20 }px; border: 1px solid rgb(238, 238, 238); border-radius: 3px; background-color: rgb(255, 255, 255); cursor: pointer; font-size: 15px; padding: 3px 10px; margin: 5px 10px; resize: no` } }></textarea>
+    <div><button onClick={ () => { Function( 'context', `with(context){${ code }}` )( context ) } } style={ { cssText: 'border: 1px solid rgb(238, 238, 238); border-radius: 3px; background-color: rgb(255, 255, 255); cursor: pointer; font-size: 15px; padding: 3px 10px; margin: 5px 10px' } }>Run</button></div>
+  </div>
+
+storiesOf( 'Browser', module )
+  .add( 'location', () => {
+    return <div>
+      <pre style={ { cssText: 'display:block; margin: 30px 10px' } }>
+        <code>
+          import {'{'} createContext {'}'} from '../index';<br/>
+          const context = createContext( {'{'} initURL: 'https://www.example.com/home' {'}'} );<br/>
+          const {'{'} window, history, location {'}'} = context;
+        </code>
+      </pre>
+
+      <RunCode 
+        context={ context }
+        title="设置并打印 href"
+        code={ `
+          location.href = '/about';
+          console.log( 'location.href:', location.href );
+        ` } />
+
+      <RunCode 
+        context={ context }
+        title="设置 hash 并打印 href"
+        code={ `
+          location.hash = '#test-hash';
+          window.addEventListener( 'hashchange', event => console.log( 'hashchange:', event ) );
+          location.hash = '#test-hash-change';
+          console.log( 'location.hash:', location.hash );
+          console.log( 'location.href:', location.href );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="设置 search"
+        code={ `
+          location.search = '?name=value';
+          console.log( 'location.href:', location.href );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="replace 跳转"
+        code={ `
+          location.replace( '/about' );
+          console.log( 'location.href', location.href );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="assign 跳转"
+        code={ `
+          location.assign( '/blog' );
+          console.log( 'location.href', location.href );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="修改 origin"
+        code={ `
+          location.origin = 'www.example2.com';
+          console.log( 'location.href', location.href );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="修改 pathname"
+        code={ `
+          location.pathname = '/home';
+          console.log( 'location.pathname', location.pathname );
+          console.log( 'location.href', location.href );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="修改 port"
+        code={ `
+          console.log( 'location.port', location.port );
+          location.port = '8080';
+          console.log( 'location.port', location.port );
+          console.log( 'location.href', location.href );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="ancestorOrigins"
+        code={ `
+          console.log( 'location.ancestorOrigins', location.ancestorOrigins );
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="reload"
+        code={ `
+          location.reload();
+        ` }
+      />
+
+      <RunCode 
+        context={ context }
+        title="toString() and valueOf()"
+        code={ `
+          console.log( 'location.toString()', location.toString() );
+          console.log( 'location.valueOf()', location.valueOf() );
+        ` }
+      />
+    </div>
+  } );

package/stories/strict.stories.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import axios from 'axios'
+
+import { storiesOf } from '@storybook/react';
+
+import { createContext } from '../src/index';
+import { useState } from '@storybook/addons';
+
+const RunCode = ( { title, code, context }) =>
+  (<div style={{margin: '0 0 30px 0' }}>
+    <h3 style={{margin:'5px 10px', fontSize: 16}}>{ title }</h3>
+    <div>
+      <button
+        onClick={ () => { new Function('context',`
+          with(context){
+            with(window.__CONSOLE_OS_GLOBAL_VARS_){
+              ${ code }
+            }
+          }` )( context ) } }
+        style={{
+          border: '1px solid rgb(238, 238, 238)',
+          borderRadius: 3,
+          backgroundColor: 'rgb(255, 255, 255)',
+          cursor: 'pointer',
+          fontSize: 15,
+          padding: '3px 10px',
+          margin: '5px 10px'
+        }}>
+          Run
+      </button>
+    </div>
+  </div>);
+
+let requested  = false;
+
+storiesOf( 'strict Mode', module )
+  .add( 'box', () => {
+    const [code, setCode] = useState(null)
+    const [context, setContext] = useState(null)
+    useEffect(() => {
+      async function request() {
+        const context = await createContext( { initURL: 'https://www.example.com/home' } );
+        setContext(context);
+        const resp = await axios.get('https://g.alicdn.com/aliyun-next/endpoint/0.1.2/index.js')
+        setCode(resp.data);
+      }
+
+      if (!requested) {
+        request();
+        requested = true;
+      }
+    }, [1]);
+    return <div>
+      <pre css={ 'display:block; margin: 30px 10px'}>
+        <code>
+          import {'{'} createContext {'}'} from &apos;../index&apos;;<br/>
+          const context = createContext( {'{'} initURL: &apos;https://www.example.com/home&apos; {'}'} );<br/>
+          const {'{'} window, history, location {'}'} = context;
+        </code>
+      </pre>
+
+      {code ? <RunCode
+        title="Strict Mode"
+        context={context}
+        code= {code}
+      /> : null}
+    </div>
+  } );