Category Archives: Javascript

Npm tips

Posted in Javascript, Node-NPM on January 15, 2021 by rowej83.

To update all dependencies in a package.json to their latest versions.. can install this globally first(just once):

npm install -g npm-check-updates

1	npm install -g npm-check-updates

and then run below which will update the versions of each dependency to the latest

ncu -u

ncu -u

finally run below to update all of the scripts to their latest. Note, this could be code breaking depending on version updates for your dependencies.

npm install

1	npm install

Notes for webpack configs to output single files for js and css bundles and more

Posted in Development, Javascript on December 10, 2020 by rowej83.

I often use a site to build webpack configs https://createapp.dev/ and I normally like to have my js and css compiled to one file each within /dist

Out of the box, it handles the entry/output for the .js but a little bit needs to be added to do the same for the .css

Here is an example webpack.config.js

const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
  watch:true,
  entry: ['./src/styles.scss',
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: 'src/index.html' }],
    }),
    new MiniCssExtractPlugin({filename:'./css/styles.css'}),
   
  ]
};

module.exports = config;

const webpack = require('webpack');

const path = require('path');

const CopyPlugin = require('copy-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {

watch:true,

entry: ['./src/styles.scss',

'react-hot-loader/patch',

'./src/index.js'

output: {

path: path.resolve(__dirname, 'dist'),

filename: './js/bundle.js'

module: {

rules: [

{

test: /\.(js|jsx)$/,

use: 'babel-loader',

exclude: /node_modules/

{

test: /\.css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader'

]

{

test: /\.scss$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader',

'sass-loader'

]

{

test: /\.svg$/,

use: 'file-loader'

{

test: /\.png$/,

use: [

{

loader: 'url-loader',

options: {

mimetype: 'image/png'

}

]

}

]

resolve: {

extensions: [

'.js',

'.jsx'

alias: {

'react-dom': '@hot-loader/react-dom'

}

devServer: {

contentBase: './dist'

plugins: [

new CopyPlugin({

patterns: [{ from: 'src/index.html' }],

}),

new MiniCssExtractPlugin({filename:'./css/styles.css'}),

]

};

module.exports = config;

Some important parts added to have the css compile to a single file. First is that the scss file(s) need to be added as an entry:

entry: ['./src/styles.scss', 'react-hot-loader/patch', './src/index.js' ]

1	entry: ['./src/styles.scss', 'react-hot-loader/patch', './src/index.js' ]

Secondly, the MiniCssExtractPlugin needs to have an object with the destination css file name added to it as you see here:

new MiniCssExtractPlugin({filename:'./css/styles.css'})

1	new MiniCssExtractPlugin({filename:'./css/styles.css'})

To process es6+ features like async/await

We must add the below dependency:

npm install @babel/plugin-transform-runtime -D

1	npm install @babel/plugin-transform-runtime -D

Finally, alter the .babelrc to look like :

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/transform-runtime"]  // <= Add it here
  ]  
}

{

"presets": [

"@babel/preset-env",

"@babel/preset-react"

"plugins": [

["@babel/transform-runtime"] // <= Add it here

]

}

Reactjs using recoil.js for state management notes

Posted in Development, Javascript, Reactjs on November 23, 2020 by rowej83.

Recoil.js is being designed by facebook apparently to replace redux so I figured I’d take a look.

My sample Codesandbox

Atoms – most basic for of state that can be shared amongst components and or selectors. It requires a “key” which must be unique and to initialize with a value(s) use default.

const marginTopState= atom({
  key: 'marginTopState',
  default: 10,
});

const marginTopState= atom({

key: 'marginTopState',

default: 10,

});

useRecoilState – Used to read and write an atom from a component.

Selectors – a pure function that will basically just return a computed value based on atom(s) and/or other selectors. By default, selectors are not writable and so can not alter the atoms/selections within it; only use it to provide its produced computed value. (get)

const marginTopComputedState = selector({
  key: 'marginTopComputedState',
  get: ({get}) => {
    const marginTopValue = get(marginTopState);
    const unit = 'px';
    // would use template literals here but my code highlighting 
    // plugin I used for the site breaks :(
    return marginTopValue+unit; 
  },
});

const marginTopComputedState = selector({

key: 'marginTopComputedState',

get: ({get}) => {

const marginTopValue = get(marginTopState);

const unit = 'px';

// would use template literals here but my code highlighting

// plugin I used for the site breaks :(

return marginTopValue+unit;

});

useRecoilValue – used to get/use the computed value from a selector.

const computedMarginTopLabel = useRecoilValue(marginTopComputedState);

1	const computedMarginTopLabel = useRecoilValue(marginTopComputedState);

Creating “n” amount of atoms

Sometimes we need an unknown amount of state atoms in an app. One way is to create a function that will returned a memorized atom based on an ID. We memorize it that way if it is the same ID we use the already made atom and return that instead of regenerating the atom.

For example:

export const itemWithID = 
  memoize(id => atom({
     key: "item"+id,   // done this way because tilde strings breaks my code highlighting plugin :(
     default: ""
}))

export const itemWithID =

memoize(id => atom({

key: "item"+id, // done this way because tilde strings breaks my code highlighting plugin :(

default: ""

}))

Then we can use it in components like below:

function SomeComponent({id}){
  const [itemState, setItemState] = useRecoilState(itemWithID(id));
  return ...
}

function SomeComponent({id}){

const [itemState, setItemState] = useRecoilState(itemWithID(id));

return ...

}

React js – creating a parent component with variable amount of child components.

Posted in Javascript on July 14, 2020 by rowej83.

Problem: Had a “option” box I was creating where there could be any number of “tags” that can be added for that option.

Solution: Created a context local to the parent/children components only, kept a separate variable to manually track how many “groups” of options has been requested by the user. Used an array of objects and updated according to index which is sent in as a prop to each set of options. Example code

// in RewriteAjaxInput.js which contains the parent and children.
// variables to be used in context

const [ruleArrayObject, setRuleArrayObject]=useImmer([
        {
            optionalBase:"default1",
            tag:"tag1",
            regexPattern:"static"
        }
    ]);
const [numberOfRules,setNumberOfRules]=React.useState(1);

// created context

<ReWriteAjaxRulesContext.Provider value={[ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]}>
   <ReWriteAjaxRules />
</ReWriteAjaxRulesContext.Provider>


// also in same class is the button to add more sets of options
// that method is below:
    const addRule=(e)=>{
        // do something
        setRuleArrayObject(draft=>{draft.push(
            {
                optionalBase:"dsf",
                tag:"sdfsf",
                regexPattern:"static"
            }

        )});

        setNumberOfRules(numberOfRules+1);
    }

// it basically adds another dummy object 
//to the array and increases numberOfRules count to +1

// in RewriteAjaxInput.js which contains the parent and children.

// variables to be used in context

const [ruleArrayObject, setRuleArrayObject]=useImmer([

{

optionalBase:"default1",

tag:"tag1",

regexPattern:"static"

}

]);

const [numberOfRules,setNumberOfRules]=React.useState(1);

// created context

<ReWriteAjaxRulesContext.Provider value={[ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]}>

</ReWriteAjaxRulesContext.Provider>

// also in same class is the button to add more sets of options

// that method is below:

const addRule=(e)=>{

// do something

setRuleArrayObject(draft=>{draft.push(

{

optionalBase:"dsf",

tag:"sdfsf",

regexPattern:"static"

}

)});

setNumberOfRules(numberOfRules+1);

}

// it basically adds another dummy object

//to the array and increases numberOfRules count to +1

Here are the Parent and child components

Parent:

// ReWriteAjaxRules ( parent )
import React from "react";
import ReWriteAjaxRule from "./ReWriteAjaxRule";
import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";
";

const ReWriteAjaxRules= props=>{
  

const createLayout=()=>{
    let result=[];
    for(let i=0;i<numberOfRules;i++){

        result.push(<ReWriteAjaxRule
        index={i}
        />)
    }

return result;
    }
    return(  <div>
        {createLayout()}
    </div>);
}

export default ReWriteAjaxRules;

// ReWriteAjaxRules ( parent )

import React from "react";

import ReWriteAjaxRule from "./ReWriteAjaxRule";

import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";

const ReWriteAjaxRules= props=>{

const createLayout=()=>{

let result=[];

for(let i=0;i<numberOfRules;i++){

result.push(<ReWriteAjaxRule

index={i}

/>)

}

return result;

}

return( <div>

{createLayout()}

</div>);

}

export default ReWriteAjaxRules;

Child:

//ReWriteAjaxRule ( child )
import React from "react";
import {InputLabel, MenuItem, Select, TextField} from "@material-ui/core";
import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";

const ReWriteAjaxRule= props=>{
    const [ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]=React.useContext(ReWriteAjaxRulesContext);

    const sendBaseUpdate=(e)=>{
      // we do the below check on e.target.value to avoid edge cases 
      // where rerendered elements return a null value for e.target.value
        let newValue=e.target.value?e.target.value:"";

       // uses immer instead of state so it's easier to mutate a 
       // particular index in the array 
        setRuleArrayObject(draft=> {
            draft[props.index].optionalBase = newValue;
        } );

    }
    const sendTagUpdate=(e)=>{
        let newValue=e.target.value?e.target.value:"";
        setRuleArrayObject(draft=> {
            draft[props.index].tag = newValue;
        } );

    }
    const sendRegexPatternUpdate=(e)=>{
        let newValue=e.target.value?e.target.value:"";
        setRuleArrayObject(draft=> {
            draft[props.index].regexPattern = newValue;
        } );

    }
    return(  <div className={"reWriteRuleRow"}>
        <TextField label="Base:"
                   helperText="Optional Base of Rewrite"
                   value={ruleArrayObject[props.index].optionalBase}
                   onChange={sendBaseUpdate}
                   type="text"
                   style={{marginRight:"10px"}}
        />
        <TextField label="GET Variable:"
            // helperText="Shortcode tag in the content. e.g. [tag]"
                   value={ruleArrayObject[props.index].tag}
                   onChange={sendTagUpdate}
                   type="text"
                   style={{marginLeft:"10px"}}
        />
        <InputLabel >
            Get Variable Type(regex):
            <Select
                labelId="label"
                id="select"
                value={ruleArrayObject[props.index].regexPattern}
                onChange={sendRegexPatternUpdate}
                style={{marginLeft:"10px"}}
            >
                <MenuItem value="static">Static Value</MenuItem>
                <MenuItem value="any">Any Value</MenuItem>
                <MenuItem value="digit">Only digit Value</MenuItem>
            </Select>
            {/*<br/><small>Self-closing shortcode: [tag]</small>*/}
            {/*<br/><small>Enclosing shortcode: [tag]content[/tag]</small>*/}
        </InputLabel>

    </div>);
}

export default ReWriteAjaxRule;

//ReWriteAjaxRule ( child )

import React from "react";

import {InputLabel, MenuItem, Select, TextField} from "@material-ui/core";

import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";

const ReWriteAjaxRule= props=>{

const [ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]=React.useContext(ReWriteAjaxRulesContext);

const sendBaseUpdate=(e)=>{

// we do the below check on e.target.value to avoid edge cases

// where rerendered elements return a null value for e.target.value

let newValue=e.target.value?e.target.value:"";

// uses immer instead of state so it's easier to mutate a

// particular index in the array

setRuleArrayObject(draft=> {

draft[props.index].optionalBase = newValue;

} );

}

const sendTagUpdate=(e)=>{

let newValue=e.target.value?e.target.value:"";

setRuleArrayObject(draft=> {

draft[props.index].tag = newValue;

} );

}

const sendRegexPatternUpdate=(e)=>{

let newValue=e.target.value?e.target.value:"";

setRuleArrayObject(draft=> {

draft[props.index].regexPattern = newValue;

} );

}

return( <div className={"reWriteRuleRow"}>

<TextField label="Base:"

helperText="Optional Base of Rewrite"

value={ruleArrayObject[props.index].optionalBase}

onChange={sendBaseUpdate}

type="text"

style={{marginRight:"10px"}}

<TextField label="GET Variable:"

// helperText="Shortcode tag in the content. e.g. [tag]"

value={ruleArrayObject[props.index].tag}

onChange={sendTagUpdate}

type="text"

style={{marginLeft:"10px"}}

Get Variable Type(regex):

<Select

labelId="label"

id="select"

value={ruleArrayObject[props.index].regexPattern}

onChange={sendRegexPatternUpdate}

style={{marginLeft:"10px"}}

<MenuItem value="static">Static Value</MenuItem>

<MenuItem value="any">Any Value</MenuItem>

<MenuItem value="digit">Only digit Value</MenuItem>

</Select>

{/*<br/><small>Self-closing shortcode: [tag]</small>*/}

{/*<br/><small>Enclosing shortcode: [tag]content[/tag]</small>*/}

</InputLabel>

</div>);

}

export default ReWriteAjaxRule;

Material UI for React js misc notes

Posted in Reactjs on July 2, 2020 by rowej83.

To be able to ref a Textfield in Material UI you have use inputRef instead of ref e.g below

<TextField
  inputRef={input => input && input.focus()}
/>

<TextField

inputRef={input => input && input.focus()}

Online Journal

My online journal about design and development related topics and what I've learned.

Category Archives: Javascript

Npm tips

Notes for webpack configs to output single files for js and css bundles and more

Reactjs using recoil.js for state management notes

React js – creating a parent component with variable amount of child components.

Material UI for React js misc notes