@mikezimm/npmfunctions
Version:
Functions used in my SPFx webparts
464 lines (348 loc) • 22.7 kB
Markdown
## npmFunctions
Moving my common functions to it's own separate npm package
## Reference posts I've used to cobble up my package:
https://medium.com/cameron-nokes/the-30-second-guide-to-publishing-a-typescript-package-to-npm-89d93ff7bccd
https://github.com/tonysneed/Demo.VSCode.TypeScript/issues/2
and finally:
https://indepth.dev/posts/1164/configuring-typescript-compiler
### Building this package
```bash
npm config set init-author-name "Mike Zimmerman"
npm set init-liscense "ISC"
npm init --scope=@mikezimm
tsc --init
tsc
npm install @pnp/spfx-controls-react
npm install @types/webpack-env
npm install @types/es6-promise
npm install --save-dev prettier tslint tslint-config-prettier
```
NOTE: added install prettier and tslint line after trying to update version. Error did not arise when doing inital
npm install react-json-view // May 16, 2022 for new Banner
Copy-Item "C:\Users\dev\Documents\GitHub\npmFunctions\src\CSS" -filter '*.css' "C:\Users\dev\Documents\GitHub\npmFunctions\dist\CSS" -recurse -verbose
Copy-Item -Path "C:\Users\dev\Documents\GitHub\npmFunctions\src\" -filter '*.css' -Destination "C:\Users\dev\Documents\GitHub\npmFunctions\dist\" -recurse -verbose
Result: - adds extra folder later for some reason: \dist\src\...
Performing the operation "Copy File" on target "Item: C:\Users\dev\Documents\GitHub\npmFunctions\src\Services\PropPane\GrayPropPaneAccordions.css Destination: C:\Users\dev\Documents\GitHub\npmFunctions\dist\src\Services\PropPane\GrayPropPaneAccordions.css".
Copy-Item "C:\Users\dev\Documents\GitHub\npmFunctions\src" -filter '*.css' "C:\Users\dev\Documents\GitHub\npmFunctions\dist" -recurse -verbose
### General Update process:
1. Update version in package.json
2. Update version in package-lock.json
3. Delete dist folder
Do this BEFORE TSC
Copy-Item "C:\Users\dev\Documents\GitHub\npmFunctions\src" -filter '*.css' "C:\Users\dev\Documents\GitHub\npmFunctions\dist" -recurse -verbose
4. Run tsc
5. npm whoami
6. npm login - if neccessary
7. Run npm publish --access=public
### To use specific version
npm install @mikezimm/npmfunctions@2.0.15
### VersionHistory
@2.0.15 - Move FPSBanner3VisHelpGroup to CoreFPS to be with related code
@2.0.13 - /PropPaneHelp/ApplyPresets.ts - add applyPresetCollectionDefaults
@2.0.12 - Move PinMeLocations && FPSPinMePropsGroup to /PinMe with code for function
RelatedItems/RelatedItemsPropGroup.ts - add buildRelatedItemsPropsGroup,
create IMinRelatedWPProps
@2.0.8 - Services/PropPane/ - add FPSImportPropsGroup
Services/PropPane/FPSOptionsGroupPinMe.ts - add PinMeLocations && FPSPinMePropsGroup
Services/PropPane/WebPartHistoryFunctions.ts - add updateWebpartHistoryV2
@2.0.7 - Core FPS project
add FPSBanner3VisHelpGroup
@2.0.5 - Core FPS project
add PinMeHelp to PropPaneHelp Common
@2.0.4 - Core FPS project
Create SitePresetsInfo in /PropPaneHelp/FPSCommonOnNpm - Based on Drilldown7 (v1.14) model
@2.0.3 - continue Core FPS project
.\HelpPanelOnNPM\onNpm\BannerSetup.ts - Update IMinWPBannerProps to include all FPS Properties
@2.0.2 - begin Core FPS project
./CoreFPS/createAboutRow - used in About.tsx page
./CoreFPS/ReusaableTricks.tsx - used in AllContent - panel
./CoreFPS/VisitorPanelComponent - visitorPanelInfo in panel
@2.0.1 - major upgrade to newer version of @pnp/spfx-controls-react
npm uninstall @pnp/spfx-controls-react
npm install @pnp/spfx-controls-react --save --save-exact
@1.0.277 - created complexStringSearch in Services/Strings/filtering to test for complex string comparisions -- 277 added expandRelatedImages/Links on text filter
@1.0.271 - update RelatedItems/GetItems.ts = Fixed https://github.com/mikezimm/PageInfo/issues/72
@1.0.269 - update RelatedItems/GetItems.ts = Fixed https://github.com/mikezimm/PageInfo/issues/79
@1.0.268 - Fixed https://github.com/mikezimm/ALVFinMan/issues/90
@1.0.267 - create Services/Strings/html: replaceHTMLEntities - clean up Modern Page html content
That was moved from RelatedItems\GetItems.ts into own file
@1.0.265 - add full RelatedItems from FPS PageInfo
@1.0.263 - fix update pinMeTop
@1.0.262 - add Services/Strings/handleBars.ts - originally from PageInfo
@1.0.260 - update pinMeTop code to shrink section margin to minimize gap at top
@1.0.257 - add SamplePropPaneHelp, update getThisSitesPreConfigProps
@1.0.256 - update IZSentAnalytics
@1.0.255 - Banner component type error fixes, fix BannerPropPaneButtonBasics, add PreConfigFunctions.ts for PropPaneHelp - PreConfig Props
@1.0.245 - Integrate WebPartHelpElement into HelpPanelOnNPM component
@1.0.242 - banner css updates - https://github.com/mikezimm/PageInfo/issues/40, https://github.com/mikezimm/PageInfo/issues/42
@1.0.241 - add feedbackEmail banner icon directly into component - https://github.com/mikezimm/PageInfo/issues/41
@1.0.239 - add forceNarrowStyles to IWebpartBannerProps so compoonent can be forced to narrow mode
@1.0.236 - Update Banner component file with latest from FPS PagesInfo but with local imports
@1.0.235 - add WebPartInterfaces/ImportProps for importing changeProps arrays
@1.0.234 - add WebPartInterfaces/ImportProps for importing changeProps arrays
@1.0.233 - add PinMe folder
@1.0.232 - remove PropPaneHelp require css
@1.0.231 - add feedbackEmail to BannerPropPaneButtonBasics, improve commenting in createFPSWindowProps
- add Services/DOM/Tags > FPSApplyTagCSSAndStyles
- add PropPaneHelp component and css
@1.0.230 - add gitRepoPageInfoSmall repoLink
@1.0.229 - Change default banner Title from Secure Script 7 to repoLinks.desc
@1.0.228 - add ALVFinMan to repo links
@1.0.227 - remove pageLayout from buildBannerProps arguments
@1.0.226 - add pageLayout: ISupportedHost to IWebpartBannerProps && IMinWPBannerProps, add _LinkStatus _LinkIsValid to AllLinks.tsx
@1.0.226 - add buildConfirmDialogBig ( thisDialog : IMyBigDialogProps ) to dialogBox.tsx
@1.0.225 - buildBannerProps updates , more bannerInfoEleChoices, setExpandoRamicMode for Single Page Apps
@1.0.222 - FPSOptionsGroup3.ts Break FPSBanner3Group into 3 groups: FPSBanner3BasicGroup,FPSBanner3NavGroup, FPSBanner3ThemeGroup. Add infoElement Option to banner
@1.0.221 - add beAUserFunction function to IWebpartBannerProps
@1.0.220 - add confirmBeAUser function, add beAUser and showBeAUserIcon where needed
@1.0.219 - add beAUser to buildBannerProps
@1.0.218 - add FPSOptionsGroupBasic - lockStyles prop. update verifyAudienceVsUser to include beAReader option
@1.0.217 - update FPSOptionsGroupBasic ( prop text )
@1.0.216 - fix updateWebpartHistory (prop)
@1.0.215 - create upgradeV1History
@1.0.213 - update IWebpartBannerState - add renderCount
@1.0.212 - update IWebpartHistory. replaced IWebpartHistoryItem1 with IWebpartHistoryItem2
@1.0.211 - update: IWebpartBannerProps - add bannerCmdReactCSS. update BannerSetup to pass on new bannerCmdReactCSS/bannerCmdStyle prop.
@1.0.205 - make: createBannerStyleStr, createBannerStyleObj, update createBannerStyle function in FPSOptionsGroup3.
@1.0.203 - created FPSBanner3Group in FPSOptionsGroup3 file. created makeCSSPropPaneString in HelpBanner/onNpm. improved createStyleFromString in StringtoReactCSS
@1.0.202 - reduce console.logs in findParentElementLikeThis, update importProps - checks propGroup as prop, checks propGroup is object or value itself.
@1.0.201 - Add 'numberAsText' to RefinerRulesNums Update refinerRuleItems to build from array of constants instead of each one individually
@1.0.200 - Update RefineRuleValues - break apart into smaller groups
@1.0.199 - in getDetailValueType, now can check for Link type columns, Add trimValues to RefineRuleValues
@1.0.198 - addItemToArrayIfItDoesNotExist - trim strings before checking
@1.0.197 - saveAnalytics3 - add language column, update RefineRuleValues
@1.0.196 - saveAnalytics3 - add language column
@1.0.195 - updateWebpartHistory - add ITrimThis type to define what part of value to trim
@1.0.192 - saveAnalytic2: Trim PageUrl text field to not include the paramters since they are in their own column
@1.0.191 - Fill in the permissionProfile missing props, change it to getFPSUser function in FPSUser file
@1.0.190 - Remove some console from analytics...
@1.0.189 - add PermissionProfile and window.FPSUser object. update verifyAudienceVsUser to match FPSUser object, add FPSUser to IBuildBannerSettings & WebpartBannerProps
@1.0.185 - change wpID to wpInstanceID to be consistent.
@1.0.184 - create IMinExportObject in ExportFunctions. wpID: string; currentWeb: string;
@1.0.183 - Update ExportFunctions to include currentWeb property as top level prop.
@1.0.183 - add BuildExportProps.ts sample file, add standardizeLocalLink to urlServices.
@1.0.182 - Add webpartHistory Interfaces and Functions to PropPane. Add webpartHistory to export JSON panel.
@1.0.182 - Update Banner Componet to accept replacePanelHTML for ReadOnly viewers.
@1.0.181 - Add initial framework for more reduced panel experience in certain cases.
@1.0.181 - update IWebpartBannerProps ( showFullPanel, replacePanelHTML, replacePanelWarning ) and bannerSetup
@1.0.181 - update IMinWPBannerProps ( fullPanelAudience, replacePanelHTML ), IBuildBannerSettings ( replacePanelWarning )
@1.0.181 - close #17 in SecureScript - remove repo links from panel version & about links when turned off
@1.0.180 - fix CheckPermissions case where Site Owners have manageWeb but not addCustomPages... and were not considered 'page editors'
@1.0.179 - fix Banner button permissions logic in BannerSetup and CheckPermissions, Banner Advanced Styling
@1.0.176 - move /onNpm/ up one level so it's easier to exclude when updating
@1.0.174 - Update BannerSetup showRepoLinks
@1.0.173 - Add HelpPanel Options - showExport, showRepoLinks
@1.0.172 - Create HelpPanel/banner/onLocal folder, move files intended for local webpart there.
@1.0.171 - Fix IWebpartBannerProps copy-paste error
@1.0.170 - Replace expandAudiences with IExpandAudiences, added 'Item Editors' to IExpandAudiences
@1.0.170 - Add CheckPermissions to /Services/Users/, add BannerSetup to /HelpPanel/banner/onNpm
@1.0.169 - Remove duplicate export baseMyRepos in RepoLinks, add homeParentGearAudience to FPSBanner2Group
@1.0.168 - Add SecureScript7 Repo link, Add FetchCode and EvalScripts functions, fix setExpandoRamicMode alert on error
@1.0.167 - Add expandoPadding
@1.0.165 - Add FPSOptionsExpando for PropPane, Services/DOM/FPSExpandoramic > expandoRamicMode
@1.0.157 - fix importProps to look for exportNotAvailable as value for export and block it from being imported
@1.0.155 - update createExportObject, createExportGroup to fix exporting null, false, undefined props
@1.0.152 - add importProps functions, update exportProps, add array/checks > indexOfAnyCase
@1.0.151 - fix Prop Pane FPS Basic options: disable sliders when not valid
@1.0.150 - fix Prop Pane FPS Basic options: margin slider, toolbar description
@1.0.149 - add tool=true link to tricks
@1.0.148 - fix minimizeToolbar call to setAllSectionStyles - was passing parent node
@1.0.147 - fix minimizeToolbar, minimizeHeader so they compile
@1.0.145 - add new FPSOptions via new file: FPSOptionsGroup2, fix minimizeHeader, create minimizeToolbar,
moved Interface functions to FPSDocument
@1.0.144 - update IFPSPage interface & initializeFPSPage
@1.0.142 - exportProps function, setSectionStyles functions and interface
@1.0.141 - exportProps tab (from Pivot Tiles)
@1.0.140 - Add Why this webpart tab to Help Panel (from Pivot Tiles)
@1.0.139 - Add Github Repo Linking in HelpPanel Content, updated HelpPanel npmFunctions and component.tsx imports
Add Elements/markdown, Services/Regex/ functions and constants;
@1.0.138 - Fix isStringValidDate import in /Services/typeServices;
@1.0.137 - Fix casing of IListView.ts filename (was IListVIew.ts);
@1.0.135 - IQuickCommands update >> buttons: IQuickButton[][];
@1.0.134 -
Created /Fields/Interfaces >> IFieldDef
Updated QuickCommands.ts to include IQuickButton and IQuickField
Updated /Refiners/Refiners.ts
Updated /Views/IListViews >> ICustViewDef & IListViewDD
Imported IActionItem & IDrillItemInfo from webparts for reuse
@1.0.133 - Recompile for missing dialogBox.ts
@1.0.132 - Action News/ Drilldown Merges.
buildMLineDiv, getArrayOfXMLElements to Strings/formatting.tsx
Add all basic Elements, dialogBox, draw
Split QuickCommmands and Refiners into separate files for functions, constants, interfaces
Add color themes to CSSCharts (for Drilldown)
@1.0.13X - Replace HelpPanel from Easy Contents - Add Tenant Site Column link, Improve styles
@1.0.131 - update components: Replace HelpPanel from PivotTiles
@1.0.131 - add functions: getWebpartWidth (DOM), Services/Navigation/siteNavigation, Services/Objects/properties
@1.0.130 - update Services/PropPane/FPSBanner2Group: Add showNavigation for Parent and Home Page
@1.0.129 - update System Lists in \Lists\Constants.ts
@1.0.128 - add HelpBanner folder
@1.0.127 - add bannerHoverEffect to Toggle type
@1.0.126 - add bannerHoverEffect to /Services/PropPane/FPSBanner2Group
@1.0.125 - move src\Links\Developer.tsx to new Links folder because it is common across all banners.
@1.0.124 - move \HelpInfo\Links\ to just \Links\ so that it's not tied to a version of the HelpInfo or new HelpPanel folder
@1.0.123 - update devTable -
@1.0.122 - update \HelpInfo\Links\LinksDevDocs.tsx - Add more dev links
@1.0.121 - update Services/PropPane/FPSOptionsGroup: update field desc in FPSBanner2Group,
@1.0.120 - update Services/PropPane/StringToReactCSS: getReactCSSFromString,
@1.0.119 - create Services/PropPane/StringToReactCSS: getReactCSSFromString, createStyleFromString
@1.0.1 Major update breaking files into folders from carrotCharts
@0.0.39 To many to list (these should work in existing projects without headaches)
### Updates:
First version update
1. Update arrayServices to latest TMT7 file... which added 2 new functions
2. Deleted dist folder
3. Ran tsc
4. Manually updated version to 0.0.3
5. ran npm publish --access=public
6. Updated my project, tested in hosted browser and it worked!
7. Just got all kinds of errors when trying to auto npm version
Ran npm version and got errors below:
```bash
> @mikezimm/npmfunctions@0.0.4 preversion C:\Users\mike.zimmerman\projects\Git\npmFunctions
> npm run lint
> @mikezimm/npmfunctions@0.0.3 lint C:\Users\mike.zimmerman\projects\Git\npmFunctions
> tslint -p tsconfig.json
module.js:549
throw err;
^
Error: Cannot find module 'typescript'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\mike.zimmerman\projects\Git\npmFunctions\node_modules\tslint\lib\linter.js:23:10)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @mikezimm/npmfunctions@0.0.3 lint: `tslint -p tsconfig.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @mikezimm/npmfunctions@0.0.3 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mike.zimmerman\AppData\Roaming\npm-cache\_logs\2021-01-05T15_30_51_438Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @mikezimm/npmfunctions@0.0.4 preversion: `npm run lint`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @mikezimm/npmfunctions@0.0.4 preversion script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
```
### Original attempts to get my src into dist folder
```bash
gulp build //did not work
npm install gulp
gulp build
PS C:\Users\mike.zimmerman\projects\Git\npmFunctions> gulp
ReferenceError: build is not defined
at Object.<anonymous> (C:\Users\mike.zimmerman\projects\Git\npmFunctions\gulpfile.js:6:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at requireOrImport (C:\Users\mike.zimmerman\AppData\Roaming\nvm\v8.11.0\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11)
at execute (C:\Users\mike.zimmerman\AppData\Roaming\nvm\v8.11.0\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:37:3)
```
finally ran
```bash
tsc
```
and got
```bash
src/arrayServices.ts:41:50 - error TS7006: Parameter 'keyNo' implicitly has an 'any' type.
41 export function stringifyKeyValue( thisOne: any, keyNo, delimiter : string ) {
~~~~~
src/arrayServices.ts:78:33 - error TS7006: Parameter 'sourceArray' implicitly has an 'any' type.
78 export function spliceCopyArray(sourceArray, startDel, countDelete, startAddOrigPos, addArray) {
~~~~~~~~~~~
src/arrayServices.ts:78:46 - error TS7006: Parameter 'startDel' implicitly has an 'any' type.
78 export function spliceCopyArray(sourceArray, startDel, countDelete, startAddOrigPos, addArray) {
~~~~~~~~
src/arrayServices.ts:78:56 - error TS7006: Parameter 'countDelete' implicitly has an 'any' type.
78 export function spliceCopyArray(sourceArray, startDel, countDelete, startAddOrigPos, addArray) {
~~~~~~~~~~~
src/arrayServices.ts:78:69 - error TS7006: Parameter 'startAddOrigPos' implicitly has an 'any' type.
78 export function spliceCopyArray(sourceArray, startDel, countDelete, startAddOrigPos, addArray) {
~~~~~~~~~~~~~~~
src/arrayServices.ts:78:86 - error TS7006: Parameter 'addArray' implicitly has an 'any' type.
78 export function spliceCopyArray(sourceArray, startDel, countDelete, startAddOrigPos, addArray) {
~~~~~~~~
src/arrayServices.ts:80:9 - error TS7034: Variable 'whole' implicitly has type 'any[]' in some locations where its type cannot be determined.
80 let whole = [];
~~~~~
src/arrayServices.ts:86:15 - error TS7005: Variable 'whole' implicitly has an 'any[]' type.
86 whole = whole.concat(addArray);
~~~~~
src/arrayServices.ts:128:40 - error TS7006: Parameter 'sourceArray' implicitly has an 'any' type.
128 export function doesObjectExistInArray(sourceArray, objectProperty : string, propValue, exact : boolean = true ){
~~~~~~~~~~~
src/arrayServices.ts:128:78 - error TS7006: Parameter 'propValue' implicitly has an 'any' type.
128 export function doesObjectExistInArray(sourceArray, objectProperty : string, propValue, exact : boolean = true ){
~~~~~~~~~
src/arrayServices.ts:227:25 - error TS7017: Element implicitly has an 'any' type because type '{}' has no index signature.
227 objectToUpdate[compareKey] = foundTag;
~~~~~~~~~~~~~~~~~~~~~~~~~~
src/arrayServices.ts:481:41 - error TS7006: Parameter 'arr' implicitly has an 'any' type.
481 export function removeItemFromArrayOnce(arr, value) {
~~~
src/arrayServices.ts:481:46 - error TS7006: Parameter 'value' implicitly has an 'any' type.
481 export function removeItemFromArrayOnce(arr, value) {
~~~~~
src/arrayServices.ts:505:40 - error TS7006: Parameter 'arr' implicitly has an 'any' type.
505 export function removeItemFromArrayAll(arr, value) {
~~~
src/arrayServices.ts:505:45 - error TS7006: Parameter 'value' implicitly has an 'any' type.
505 export function removeItemFromArrayAll(arr, value) {
~~~~~
```
Then I fixed all the errors and updated the tsconfig to
```json
{
"compilerOptions": {
//"rootDir": ".",
"outDir": "./dist",
}
}
```
Then reran this from the Git\npmFunctions folder in command prompt, and got all files in the dist folder
```bash
tsc
```
This package produces the following:
* lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN.
## 2022-04-19: Setting up edit on home pc:
npm config set init-author-name "Mike Zimmerman"
npm set init-liscense "ISC"
npm init --scope=@mikezimm
npm install
got errors like this again trying to run tsc
PS C:\Users\mike.zimmerman\projects\Git\npmFunctions> gulp
ReferenceError: build is not defined
at Object.<anonymous> (C:\Users\mike.zimmerman\projects\Git\npmFunctions\gulpfile.js:6:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at requireOrImport (C:\Users\mike.zimmerman\AppData\Roaming\nvm\v8.11.0\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11)
at execute (C:\Users\mike.zimmerman\AppData\Roaming\nvm\v8.11.0\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:37:3)
```
npm install @pnp/spfx-controls-react
npm install @types/webpack-env
npm install @types/es6-promise
npm install --save-dev prettier tslint tslint-config-prettier
```
NOTE: added install prettier and tslint line after trying to update version. Error did not arise when doing inital