pkg-test-a v4.2.115

START OF README.MD

TODO THIS IS A VERY OLD VERSION AND MANY PARTS ARE REPLACED BY STUFF IN OTHER README.MD FILES

This is the README.MD file for npm package "pkg-test-a'

This is a throwaway package for author to learn how to create and publish npm packages.
In folder where npm publish is run, qrcode was added to package.json; this demonstrates how dependencies get contained in package, not client.
There is also code to experiment with handling image load delays.

npx create-react-app my-app
cd my-app
# adds package to node_modules and to  
# package.json (with version) so it reloads the next "npm i"
# to get latest version later on, re-run; it   
# also updates package.json version 
npm i pkg-test-a
notepad src/App.js
# add sample App.js code as below
npm start
# in browser debug, under "network" try 
# "disable cache" and throttling load rate  
# to see image preload work.

Sample App.js
Look out for these details:

• import from pkg-test-a shows what functions and functional components it exports. TODO ME: document these.
• imports an image from subfolder of package. Done so that this example has a local image to play with. See code how it gets eaten.
• the image DOM object showing Mona Lisa initially shows a stand-in while the real image loads. See how onLoad calls loadImageFromUrl(evt.target, monaLisa175k) which replaces the stand-in when Mona Lisa has finished loading. the url is library of congress and image is public domain

import React, { useEffect, useRef, useState } from 'react';
import { helperA, HelperB, DoQRCode, HelperB2 } from 'pkg-test-a'
import jalepenos from 'pkg-test-a/jpegs/farmersmkt/jalepenos.JPG'

function App() {
  helperA();
  return(<>
    < DoQRCode qrmessage='hat and coffee on wood table' />
    < DoImgFromNpmImport />
    <div className='redcolor'>test div<br/>
    note that this client does not need to include helper.css<br/>
    seems to be included with the function import from the package<br/>
    look at this in chrome debugger to see where css comes from</div>
    This app uses npm package pkg-test-a<br></br>
    <HelperB /><br/><HelperB2 className='redcolor' />
    </> )
}

function DoImgFromNpmImport() {
  function doClick(imgDomObj, srcAssetName) {
    console.log('click');
    loadImageFromImport(imgDomObj, srcAssetName);
  }
  /* imports an "asset" from npm package, which it considers a "module".
     This may take some time if the
     image is large so use a "promise"; that is what the "then" is.
     The "then" gets run once the asset is loaded.
     In this case it sets the source of the imgDomObj to the
     "default" object of the module.
     Typically the imgDomObj is initially setup with an image indicating
     it is still loading ie: a clock. It gets replaced then the asset loads */
  function loadImageFromImport(imgDomObj, srcAssetName) {
    import('pkg-test-a/jpegs/farmersmkt/' + srcAssetName + '.JPG').then(
      (moduleA) => { imgDomObj.src = moduleA.default; })
    // moduleA.default typically '/static/media/daisy.56e68060ce01d2a8f19b.JPG'
  }
  /* for loading large images which take time.
   * When loaded REPLACES the stand-in image, so "click" must be setup here.
  */
  function loadImageFromUrl(imgDomObj, srcUrl) {
    var imgA = new Image();
    imgA.src = srcUrl;
    imgA.addEventListener("click", (evt) => { doClick(evt.target, 'daisy')})
    imgA.addEventListener("load", () => {
        console.log('img loaded fromurl')
        imgDomObj.replaceWith(imgA);
    })
    imgA.addEventListener('error',
        (imgErr) => {
          console.log('image load err: ' + imgErr.message)});
  }

  function preventLoop(imgDomObj) {
      if (imgDomObj.attributes.isloaded.value == 't') return true;
      imgDomObj.setAttribute('isloaded','t');
  }
  const monaLisa175k = 'https://tile.loc.gov/storage-services/service/pnp/det/4a20000/4a25000/4a25000/4a25019v.jpg'
  const preloadImage = jalepenos;
  return (<img src={preloadImage} isloaded='f'
            onClick={(evt) => { doClick(evt.target, 'daisy')}}
            onLoad={(evt) => { if (preventLoop(evt.target)) return;
              //loadImageFromImport(evt.target, 'garlic');
              loadImageFromUrl(evt.target, monaLisa175k)
            }}
            />);
}
export default App;

END OF README.MD