Lightnet

export const GunInjectKey = Symbol();

Lightnet

Information:

This is simple Event Bus with the vue 3 feature of provide, inject, Symbol.

There are different way to set up.

Credits:

• https://stackoverflow.com/questions/63471824/vue-js-3-event-bus

import { createApp } from 'vue'

Lightnet

<script setup>
/*
  LICENSE: MIT
  Created by: Lightnet
*/

// https://sbcode.net/threejs/transform-controls/
// https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_transform.html
// https://threejs.org/examples/#misc_controls_transform
import { TransformControls } from 'three/examples/jsm/controls/TransformControls';

Lightnet

Creating logging for React.js.

Note that nodejs and broswer is different one is file path and other is browser path.

Notice that broswer js is tricky depend on the build which is webpack bundle.js if there change in format it goes back to bundle.js instead of src path.

let e = new Error(args);
let stack = String(e.stack)
// fail, go to bundle.js url

Lightnet

use search engine to learn hook and axios for clean up and reuse.

Worked on refine the code to deal with the user interacting when type when render components.

Create the init instance when it mount.

Added isLoading to make sure the axios instance. One reason is that useEffect mount on when user doing get url on render to get data.

Watch variables and mount interceptors that check for the token expire. If events it will change in interceptors and clean up.

Lightnet

/*
  LICENSE: MIT
  Created by: Lightnet
*/

import React,{ createContext, useState, useMemo, useContext, useEffect } from "react";
//import useFetch from "../hook/useFetch.mjs";
import { 
  parseJwt 
  //, isEmpty

Lightnet

import React, { useEffect, useState } from "react";

export default function AceEditor(props){

  const [Ace, SetAce] = useState(null);

  useEffect( async()=>{
    if (typeof window !== 'undefined') {//server ssr
      const ReactAce = await import("react-ace"); //load in order
      //await import("ace-builds/src-noconflict/mode-java"); //load in order

Lightnet

//listen to event context

import React,{ useEffect, useState } from "react";
import { useEvent } from "./EventProvider.js";

export default function EventLog(){

  const [log, setLog] = useState("");

  const {event} = useEvent();

Lightnet

import { createContext, useContext, useMemo, useState } from "react";

// create content variable for store data
export const ForumContext = createContext();

// check Provider root level top
export function useForum(){
  const context = useContext(ForumContext);
  if (!context) {
    throw new Error(`useForum must be used within a UserContext`)

Lightnet

//https://atomizedobjects.com/blog/javascript/develop-2d-javascript-games-html5-react/

import { useEffect } from 'react';

export default function useEvent(event, handler) {
  useEffect(() => {
    // initiate the event handler
    window.addEventListener(event, handler);