fullcalendaryarn-workspacesnpm-linkyalc

How can I use a local version of full calendar in my project?


I'm trying to see if I can contribute a fix to a couple of issues we've been having with full calendar.

I've cloned the full calendar repo using git clone --recursive git://github.com/fullcalendar/fullcalendar.git and run yarn install.

I've gone into our project used npm link to link up the packages like so:

npm link \
 ~/dev/fullcalendar/packages/common \
 ~/dev/fullcalendar/packages/core \
 ~/dev/fullcalendar/packages/interaction \
 ~/dev/fullcalendar/packages-premium/premium-common \
 ~/dev/fullcalendar/packages-premium/resource-common \
 ~/dev/fullcalendar/packages-premium/resource-timeline \
 ~/dev/fullcalendar/packages-premium/scrollgrid \
 ~/dev/fullcalendar/packages-premium/timeline \
 ~/dev/fullcalendar/packages-contrib/vue

However, the packages don't seem to be playing nice with each other, seemingly they can't see eachother, so I get many, many errors when I try to run the project such as

ERROR in /Users/abarratt/dev/main/src/PODFather-Main/symfather/node_modules/@fullcalendar/common/main.d.ts(96,36):
96:36 Cannot find module './util/scrollbar-width' or its corresponding type declarations.
    94 | export { CssDimValue, ScrollerLike, SectionConfig, ColProps, ChunkConfig, hasShrinkWidth, renderMicroColGroup, getScrollGridClassNames, getSectionClassNames, getSectionHasLiquidHeight, getAllowYScrolling, renderChunkContent, computeShrinkWidth, ChunkContentCallbackArgs, sanitizeShrinkWidth, ChunkConfigRowContent, ChunkConfigContent, isColPropsEqual, renderScrollShim, getStickyFooterScrollbar, getStickyHeaderDates, } from './scrollgrid/util';
    95 | export { Scroller, ScrollerProps, OverflowValue } from './scrollgrid/Scroller';
  > 96 | export { getScrollbarWidths } from './util/scrollbar-width';
       |                                    ^
    97 | export { RefMap } from './util/RefMap';
    98 | export { getIsRtlScrollbarOnLeft } from './util/scrollbar-side';
    99 | export { NowTimer } from './NowTimer';

I'm assuming there's some yarn workspaces vs npm battle going on here but perhaps it's just something simple I need to tweak, or some step I've neglected.

Any help would be much appreciated :)


Solution

  • The answer it would seem, is yalc. By building using yarn run build as well as yarn run build-contrib followed finally with a manual yarn run ci inside the vue package (because something seems to break in the build-contrib script so it doesn't get fired properly), I was then able to publish and sym-link these correctly into my npm project properly, with all workspace linking resolved.

    I've written the following bash script to do the job for me: yalc-init-local-fullcalendar-link.sh

    #!/bin/sh
    
    if ! command -v yalc &> /dev/null; then
        echo ""
        echo "Hi,"
        echo ""
        echo "You must install yalc globally to link the local full calendar packages."
        echo "You can do that by running"
        echo "sudo npm install yalc -g"
        echo ""
        echo "Andy Barratt"
        echo ""
        exit
    fi
    
    START_DIR=`pwd`
    
    if [[ -z "$FULLCALENDAR_DIR" ]]; then
      FULLCALENDAR_DIR="$HOME/dev/fullcalendar"
    fi
    
    yalc_publish_packages_in_folder()
    {
        cd $@
        for package in */ ; do
            cd $package
            echo "Publishing `pwd`"
            yalc publish
            cd ..
        done
    }
    
    # Do some cleanup first
    git checkout package.json
    rm -rf .yalc
    rm yalc.lock
    rm -rf node_modules
    npm ci
    
    # Build full calendar
    cd $FULLCALENDAR_DIR
    yarn run build
    yarn run contrib:build
    # seems one of the other contributing packages has a bug in it,
    # so we'll go ahead and run the vue one manually for now.
    cd $FULLCALENDAR_DIR/packages-contrib/vue
    yarn run ci
    
    yalc_publish_packages_in_folder $FULLCALENDAR_DIR/packages
    yalc_publish_packages_in_folder $FULLCALENDAR_DIR/packages-contrib
    yalc_publish_packages_in_folder $FULLCALENDAR_DIR/packages-premium
    
    cd $START_DIR
    for package in node_modules/@fullcalendar/*/ ; do
        package_name=@fullcalendar/`basename $package`
        echo Linking $package_name
        yalc link $package_name
    done