Bundle entryState as a separate package export

entry_types/scrolled/package/.eslintignore

@@ -3,6 +3,7 @@
 /node_modules
 /contentElements
 /editor.js
+/entryState.js
 /frontend
 /frontend-server.js
 /contentElements-editor.js

entry_types/scrolled/package/.eslintrc.js

@@ -22,6 +22,32 @@ module.exports = {
         'jest/globals': true,
       },
       "extends": ["plugin:jest/recommended"]
+    },
+    {
+      // Content elements, widgets and the editor are bundled
+      // separately and need to import from 'pageflow-scrolled/frontend'
+      // and 'pageflow-scrolled/entryState' to keep that code external.
+      // Stories are excluded because they legitimately import the
+      // content element's sibling './frontend' aggregator via
+      // '../frontend'.
+      "files": ["src/contentElements/**/*.js", "src/widgets/**/*.js", "src/editor/**/*.js"],
+      "excludedFiles": ["src/**/stories.js"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": ["**/frontend/**", "../**/frontend", "**/entryState/**"]
+        }]
+      }
+    },
+    {
+      // The frontend is bundled separately from entryState and needs
+      // to use 'pageflow-scrolled/entryState' to keep that code
+      // external.
+      "files": ["src/frontend/**/*.js"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": ["**/entryState/**", "../**/entryState"]
+        }]
+      }
     }
   ]
 };

entry_types/scrolled/package/.gitignore

@@ -2,6 +2,7 @@
 /contentElements
 /editor.js
 /editor.css
+/entryState.js
 /frontend
 /frontend-server.js
 /contentElements-editor.js

entry_types/scrolled/package/.storybook/main.js

@@ -36,6 +36,7 @@ module.exports = {
           ...config.resolve.alias,
           'pageflow/frontend': path.resolve(__dirname, '../../../../package/src/frontend'),
           'pageflow/review': path.resolve(__dirname, '../../../../package/src/review'),
+          'pageflow-scrolled/entryState': path.resolve(__dirname, '../src/entryState'),
           'pageflow-scrolled/frontend': path.resolve(__dirname, '../src/frontend'),
           'pageflow-scrolled/review': path.resolve(__dirname, '../src/review'),
           'pageflow-scrolled/testHelpers': path.resolve(__dirname, '../src/testHelpers')

entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js

@@ -3,6 +3,7 @@ import {FileInputView, CheckBoxInputView} from 'pageflow/editor';
 import {SelectInputView, SeparatorView, ColorInputView} from 'pageflow/ui';
 import I18n from 'i18n-js';
 
+// eslint-disable-next-line no-restricted-imports
 import {
   defaultRemainingWaveformColor,
   defaultRemainingWaveformColorInverted,

entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js

@@ -1,6 +1,6 @@
 import {Object} from 'pageflow/ui';
 import {ReviewMessageHandler} from 'pageflow-scrolled/review';
-import {watchCollections} from '../../entryState';
+import {watchCollections} from 'pageflow-scrolled/entryState';
 import {InsertContentElementDialogView} from '../views/InsertContentElementDialogView'
 import {SelectLinkDestinationDialogView} from '../views/SelectLinkDestinationDialogView'
 

entry_types/scrolled/package/src/editor/views/EditSectionTransitionView.js

@@ -1,7 +1,7 @@
 import {EditConfigurationView} from 'pageflow/editor';
 import {EditSectionTransitionEffectView} from './EditSectionTransitionEffectView';
 import {getAvailableTransitionNames} from 'pageflow-scrolled/frontend';
-import {normalizeSectionConfigurationData} from '../../entryState';
+import {normalizeSectionConfigurationData} from 'pageflow-scrolled/entryState';
 
 export const EditSectionTransitionView = EditConfigurationView.extend({
   translationKeyPrefix: 'pageflow_scrolled.editor.edit_section_transition',

entry_types/scrolled/package/src/editor/views/SectionThumbnailView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {cssModulesUtils} from 'pageflow/ui';
-import {watchCollections} from '../../entryState';
+import {watchCollections} from 'pageflow-scrolled/entryState';
 import {StandaloneSectionThumbnail} from 'pageflow-scrolled/frontend'
 
 import styles from './SectionThumbnailView.module.css';

entry_types/scrolled/package/src/editor/views/inputs/TypographyVariantSelectInputView.js

@@ -5,7 +5,7 @@ import Backbone from 'backbone';
 import styles from './TypographyVariantSelectInputView.module.css';
 
 import {ListboxInputView} from './ListboxInputView';
-import {watchCollections} from '../../../entryState';
+import {watchCollections} from 'pageflow-scrolled/entryState';
 import {StandaloneSectionThumbnail} from 'pageflow-scrolled/frontend'
 
 export const TypographyVariantSelectInputView = ListboxInputView.extend({

entry_types/scrolled/package/src/entryState/index.js

@@ -17,7 +17,8 @@ export {
   useChapters,
   useChapter,
   useSectionForegroundContentElements,
-  useContentElement
+  useContentElement,
+  useMainStoryline
 } from './structure';
 export {useFile} from './useFile';
 export {useFileWithInlineRights} from './useFileWithInlineRights';

entry_types/scrolled/package/src/frontend/AudioPlayer/AudioStructuredData.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {ensureProtocol} from '../utils/urls';
 import {formatTimeDuration} from '../utils/iso8601';
-import {useEntryMetadata} from '../../entryState';
+import {useEntryMetadata} from 'pageflow-scrolled/entryState';
 
 import {StructuredData} from '../StructuredData';
 

entry_types/scrolled/package/src/frontend/Content.js

@@ -4,7 +4,7 @@ import Chapter from "./Chapter";
 import {VhFix} from './VhFix';
 import {useActiveExcursion} from './useActiveExcursion';
 import {useCurrentSectionIndexState} from './useCurrentChapter';
-import {useEntryStructure} from '../entryState';
+import {useEntryStructure} from 'pageflow-scrolled/entryState';
 import {extensible} from './extensions';
 import {usePostMessageListener} from './usePostMessageListener';
 import {useSectionChangeEvents} from './useSectionChangeEvents';

entry_types/scrolled/package/src/frontend/Figure.js

@@ -6,7 +6,7 @@ import {EditableText} from './EditableText';
 import {useDarkBackground} from './backgroundColor';
 import {useContentElementEditorState} from './useContentElementEditorState';
 import {useI18n} from './i18n';
-import {useTheme} from '../entryState';
+import {useTheme} from 'pageflow-scrolled/entryState';
 import {isBlankEditableTextValue} from './utils/blank';
 
 import styles from './Figure.module.css';

entry_types/scrolled/package/src/frontend/ImageStructuredData.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {ensureProtocol} from './utils/urls';
-import {useEntryMetadata} from '../entryState';
+import {useEntryMetadata} from 'pageflow-scrolled/entryState';
 
 import {StructuredData} from './StructuredData';
 

entry_types/scrolled/package/src/frontend/Link.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useChapter, useDownloadableFile, useEmbedOriginUrl} from '../entryState';
+import {useChapter, useDownloadableFile, useEmbedOriginUrl} from 'pageflow-scrolled/entryState';
 
 export function Link({attributes, children, href, openInNewTab}) {
   const embedOriginUrl = useEmbedOriginUrl();

entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import {useDarkBackground} from '../../backgroundColor';
-import {useTheme} from '../../../entryState';
+import {useTheme} from 'pageflow-scrolled/entryState';
 import {Waveform} from './Waveform';
 import {TimeDisplay} from '../TimeDisplay';
 import {TextTracksMenu} from '../TextTracksMenu';

entry_types/scrolled/package/src/frontend/RootProviders.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {consent as consentApi} from 'pageflow/frontend';
 
 import {BrowserFeaturesProvider} from './useBrowserFeature';
-import {EntryStateProvider} from '../entryState';
+import {EntryStateProvider} from 'pageflow-scrolled/entryState';
 import {FocusOutlineProvider} from './focusOutline';
 import {LocaleProvider} from './i18n';
 import {PhonePlatformProvider} from './PhonePlatformProvider';

entry_types/scrolled/package/src/frontend/Section.js

@@ -6,7 +6,7 @@ import { SectionAtmo } from './SectionAtmo';
 import {
   useSectionForegroundContentElements,
   useFileWithInlineRights
-} from '../entryState';
+} from 'pageflow-scrolled/entryState';
 
 import {Foreground} from './Foreground';
 import {BackdropFrameEffect} from './BackdropFrameEffect';

entry_types/scrolled/package/src/frontend/SectionThumbnail.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Measure from 'react-measure';
 
 import {RootProviders} from './RootProviders';
-import {useEntryStateDispatch, useSection} from '../entryState';
+import {useEntryStateDispatch, useSection} from 'pageflow-scrolled/entryState';
 import {Section} from './Section';
 import {FullscreenDimensionProvider} from './Fullscreen';
 import {StaticPreview} from './useScrollPositionLifecycle';

entry_types/scrolled/package/src/frontend/ThemeIcon.js

@@ -31,7 +31,7 @@ import exitFullscreen from './icons/exitFullscreen.svg';
 import play from './icons/play.svg';
 import pause from './icons/pause.svg';
 
-import {useTheme} from '../entryState';
+import {useTheme} from 'pageflow-scrolled/entryState';
 
 const icons = {
   expand: arrowRight,

entry_types/scrolled/package/src/frontend/VideoPlayer/VideoStructuredData.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {ensureProtocol} from '../utils/urls';
 import {formatTimeDuration} from '../utils/iso8601';
-import {useEntryMetadata} from '../../entryState';
+import {useEntryMetadata} from 'pageflow-scrolled/entryState';
 
 import {StructuredData} from '../StructuredData';
 

entry_types/scrolled/package/src/frontend/VideoPlayerControls.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {MediaPlayerControls} from './MediaPlayerControls';
 import {useVideoQualitySetting} from './useVideoQualitySetting';
-import {useAvailableQualities} from '../entryState';
+import {useAvailableQualities} from 'pageflow-scrolled/entryState';
 import {useI18n} from './i18n';
 
 export function VideoPlayerControls({videoFile, ...props}) {

entry_types/scrolled/package/src/frontend/Widget.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {api} from './api';
-import {useWidget} from '../entryState';
+import {useWidget} from 'pageflow-scrolled/entryState';
 import {extensible} from './extensions';
 
 export const Widget = extensible('Widget', function Widget({role, props, children, renderFallback}) {

entry_types/scrolled/package/src/frontend/WidgetPresenceWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useActiveWidgets} from '../entryState';
+import {useActiveWidgets} from 'pageflow-scrolled/entryState';
 import {api} from './api';
 
 export function WidgetPresenceWrapper({children}) {

entry_types/scrolled/package/src/frontend/commenting/EntryDecorator.js

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 
-import {useEntryMetadata} from '../../entryState';
+import {useEntryMetadata} from 'pageflow-scrolled/entryState';
 import {createReviewSession} from 'pageflow/review';
 import {ReviewStateProvider, ReviewMessageHandler} from 'pageflow-scrolled/review';
 import {AddCommentModeProvider} from './AddCommentModeProvider';

entry_types/scrolled/package/src/frontend/dash.js

@@ -1,5 +1,5 @@
 import {browser} from 'pageflow/frontend';
-import {getFileUrlTemplateHost} from '../entryState';
+import {getFileUrlTemplateHost} from 'pageflow-scrolled/entryState';
 
 export async function loadDashUnlessHlsSupported(seed) {
   if (!hasHlsSupport({seed, agent: browser.agent})) {

entry_types/scrolled/package/src/frontend/i18n.js

@@ -1,6 +1,6 @@
 import React, {useContext, createContext} from 'react';
 import I18n from 'i18n-js';
-import {useEntryMetadata} from '../entryState';
+import {useEntryMetadata} from 'pageflow-scrolled/entryState';
 
 const LocaleContext = createContext('en');
 

entry_types/scrolled/package/src/frontend/index.js

@@ -81,7 +81,7 @@ export {
   useTheme,
   useShareProviders,
   useShareUrl
-} from '../entryState';
+} from 'pageflow-scrolled/entryState';
 
 export {ContentElementAttributesProvider} from './useContentElementAttributes';
 export {useContentElementConfigurationUpdate} from './useContentElementConfigurationUpdate';

entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementConfigurationUpdateProvider.js

@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 
 import {ContentElementConfigurationUpdateContext} from '../useContentElementConfigurationUpdate';
-import {updateContentElementConfiguration, useEntryStateDispatch} from '../../entryState';
+import {updateContentElementConfiguration, useEntryStateDispatch} from 'pageflow-scrolled/entryState';
 import {postUpdateContentElementMessage} from './postMessage';
 
 export function ContentElementConfigurationUpdateProvider({id, permaId, children}) {

entry_types/scrolled/package/src/frontend/inlineEditing/EntryDecorator.js

@@ -1,7 +1,7 @@
 import React, {useEffect, useCallback} from 'react';
 
 import {ReviewStateProvider} from 'pageflow-scrolled/review';
-import {useEntryStateDispatch} from '../../entryState';
+import {useEntryStateDispatch} from 'pageflow-scrolled/entryState';
 import {usePostMessageListener} from '../usePostMessageListener';
 import {EditorStateProvider, useEditorSelection} from './EditorState';
 import {

entry_types/scrolled/package/src/frontend/inlineEditing/LinkTooltip.js

@@ -12,8 +12,7 @@ import {
 } from '@floating-ui/react';
 
 import {useI18n} from '../i18n';
-import {useChapter, useDownloadableFile} from '../../entryState';
-import {useMainStoryline} from '../../entryState/structure';
+import {useChapter, useDownloadableFile, useMainStoryline} from 'pageflow-scrolled/entryState';
 import {SectionThumbnail} from '../SectionThumbnail';
 import {useFloatingPortalRoot} from '../FloatingPortalRootProvider';
 import {useStorylineActivity} from '../storylineActivity';

entry_types/scrolled/package/src/frontend/inlineEditing/MarginIndicator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useTheme} from '../../entryState';
+import {useTheme} from 'pageflow-scrolled/entryState';
 import {Scale} from '../../shared/Scale';
 import {useContentElementEditorState} from '../useContentElementEditorState';
 import {useI18n} from '../i18n';

entry_types/scrolled/package/src/frontend/inlineEditing/PaddingIndicator.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import {useTheme} from '../../entryState';
+import {useTheme} from 'pageflow-scrolled/entryState';
 import {Scale} from '../../shared/Scale';
 import {getAppearanceSectionScopeName} from '../appearance';
 import {useEditorSelection} from './EditorState';

entry_types/scrolled/package/src/frontend/inlineEditing/WidgetConfigurationUpdateProvider.js

@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 
 import {WidgetConfigurationUpdateContext} from '../useWidgetConfigurationUpdate';
-import {updateWidgetConfiguration, useEntryStateDispatch} from '../../entryState';
+import {updateWidgetConfiguration, useEntryStateDispatch} from 'pageflow-scrolled/entryState';
 import {postUpdateWidgetMessage} from './postMessage';
 
 export function WidgetConfigurationUpdateProvider({role, children}) {

entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import {api} from '../api';
 import {ContentElements} from '../ContentElements';
 import useMediaQuery from '../useMediaQuery';
-import {useTheme} from '../../entryState';
+import {useTheme} from 'pageflow-scrolled/entryState';
 import {widths, widthName} from './widths';
 
 import styles from './TwoColumn.module.css';

entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptIn.js

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {useConsentGiven} from './hooks';
 import {useI18n} from '../i18n';
 import {useContentElementAttributes} from '../useContentElementAttributes';
-import {useContentElementConsentVendor} from '../../entryState';
+import {useContentElementConsentVendor} from 'pageflow-scrolled/entryState';
 import {usePrivacyLink} from '../usePrivacyLink';
 
 import styles from './OptIn.module.css';

entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import {useConsentGiven} from './hooks';
-import {useTheme, useContentElementConsentVendor} from '../../entryState';
+import {useTheme, useContentElementConsentVendor} from 'pageflow-scrolled/entryState';
 import {useI18n} from '../i18n';
 import {useContentElementAttributes} from '../useContentElementAttributes';
 import {widths} from '../layouts';

entry_types/scrolled/package/src/frontend/useBackdrop.js

@@ -1,4 +1,4 @@
-import {useContentElement, useFileWithInlineRights} from '../entryState';
+import {useContentElement, useFileWithInlineRights} from 'pageflow-scrolled/entryState';
 import {usePortraitOrientation} from './usePortraitOrientation';
 
 export function useBackdrop(section) {

entry_types/scrolled/package/src/frontend/useCurrentChapter.js

@@ -1,6 +1,6 @@
 import React, {useState, useContext, useMemo} from 'react';
 
-import {useSectionsWithChapter} from '../entryState';
+import {useSectionsWithChapter} from 'pageflow-scrolled/entryState';
 
 const CurrentChapterContext = React.createContext();
 const CurrentSectionIndexStateContext = React.createContext();

entry_types/scrolled/package/src/frontend/usePrivacyLink.js

@@ -1,4 +1,4 @@
-import {useLegalInfo} from '../entryState';
+import {useLegalInfo} from 'pageflow-scrolled/entryState';
 
 // eslint-disable-next-line no-script-url
 const displayPrivacySettingsUrl = 'javascript:pageflowDisplayPrivacySettings()';

entry_types/scrolled/package/src/frontend/useTextTracks.js

@@ -1,4 +1,4 @@
-import {useEntryMetadata, useNestedFiles} from '../entryState';
+import {useEntryMetadata, useNestedFiles} from 'pageflow-scrolled/entryState';
 import {useSetting} from './useSetting';
 import {useI18n} from './i18n';
 

rollup.config.js

@@ -275,6 +275,15 @@ const pageflowScrolled = [
       ...plugins({extractCss: true})
     ]
   },
+  {
+    input: pageflowScrolledPackageRoot + '/src/entryState/index.js',
+    output: {
+      file: pageflowScrolledPackageRoot + '/entryState.js',
+      format: 'esm',
+    },
+    external,
+    plugins: plugins()
+  },
   {
     input: pageflowScrolledPackageRoot + '/src/frontend/index.js',
     output: {