Remove lookahead regex

README.md

@@ -38,7 +38,7 @@
 
   <p align="center">
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
     </strong>
   </p>
 </div>

packages/embla-carousel-auto-height/README.md

@@ -38,7 +38,7 @@
 
   <p align="center">
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
     </strong>
   </p>
 </div>

packages/embla-carousel-autoplay/README.md

@@ -38,7 +38,7 @@
 
   <p align="center">
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
     </strong>
   </p>
 </div>

packages/embla-carousel-class-names/README.md

@@ -38,7 +38,7 @@
 
   <p align="center">
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
     </strong>
   </p>
 </div>

packages/embla-carousel-docs/README.md

@@ -38,7 +38,7 @@
 
   <p align="center">
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
     </strong>
   </p>
 </div>

packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactEntry.ts

@@ -1,19 +1,23 @@
 import { EmblaOptionsType } from 'embla-carousel-react'
 import { SandboxLanguageType, SandboxModuleType } from '../sandboxTypes'
-import { isLanguageTypeScript } from '../sandboxUtils'
 import {
+  injectSandboxIosPickerLoop,
+  injectSandboxOptions,
+  isLanguageTypeScript,
   SANDBOX_REGEX_IOS_PICKER_LOOP,
   SANDBOX_REGEX_OPTIONS,
-} from '../sandboxRegex'
+} from '../sandboxUtils'
 
-const CAROUSEL_IMPORT_REGEX = /((?<=EmblaCarousel\sfrom\s)(.*))/
-const SLIDE_COUNT_REGEX = /((?<=SLIDE_COUNT\s\=\s)\d{1,})/
+const CAROUSEL_IMPORT_REGEX = /import\sEmblaCarousel\sfrom\s'(.*)'/
+const SLIDE_COUNT_REGEX = /const\sSLIDE_COUNT\s=\s\d{1,}/
+const CAROUSEL_IMPORT_REPLACE = 'import EmblaCarousel from "./EmblaCarousel"'
 
 export const createSandboxReactDefaultEntry = async (
   language: SandboxLanguageType,
   slides: number[],
   options: EmblaOptionsType,
 ): Promise<string> => {
+  const slideCount = slides.length.toString()
   const isTypeScript = isLanguageTypeScript(language)
   let entry: SandboxModuleType
 
@@ -28,9 +32,9 @@ export const createSandboxReactDefaultEntry = async (
   }
 
   return entry.default
-    .replace(CAROUSEL_IMPORT_REGEX, '"./EmblaCarousel"')
-    .replace(SLIDE_COUNT_REGEX, slides.length.toString())
-    .replace(SANDBOX_REGEX_OPTIONS, JSON.stringify(options))
+    .replace(CAROUSEL_IMPORT_REGEX, CAROUSEL_IMPORT_REPLACE)
+    .replace(SANDBOX_REGEX_OPTIONS, injectSandboxOptions(options))
+    .replace(SLIDE_COUNT_REGEX, (match) => match.replace(/\d{1,}/, slideCount))
 }
 
 export const createSandboxReactIosPickerEntry = async (
@@ -51,6 +55,6 @@ export const createSandboxReactIosPickerEntry = async (
   }
 
   return entry.default
-    .replace(CAROUSEL_IMPORT_REGEX, '"./EmblaCarousel"')
-    .replace(SANDBOX_REGEX_IOS_PICKER_LOOP, loop.toString())
+    .replace(CAROUSEL_IMPORT_REGEX, CAROUSEL_IMPORT_REPLACE)
+    .replace(SANDBOX_REGEX_IOS_PICKER_LOOP, injectSandboxIosPickerLoop(loop))
 }

packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactFooter.ts

@@ -1,7 +1,9 @@
 import { URLS } from 'consts/urls'
 import { SandboxLanguageType, SandboxModuleType } from '../sandboxTypes'
-import { isLanguageTypeScript } from '../sandboxUtils'
-import { SANDBOX_REGEX_REPOSITORY_URL } from '../sandboxRegex'
+import {
+  isLanguageTypeScript,
+  SANDBOX_REGEX_REPOSITORY_URL,
+} from '../sandboxUtils'
 
 export const createSandboxReactFooter = async (
   language: SandboxLanguageType,

packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactHeader.ts

@@ -1,7 +1,6 @@
 import { kebabCaseToPascalCase } from 'utils/kebabCaseToPascalCase'
 import { SandboxLanguageType, SandboxModuleType } from '../sandboxTypes'
-import { isLanguageTypeScript } from '../sandboxUtils'
-import { SANDBOX_REGEX_TITLE } from '../sandboxRegex'
+import { isLanguageTypeScript, SANDBOX_REGEX_TITLE } from '../sandboxUtils'
 
 export const createSandboxReactHeader = async (
   language: SandboxLanguageType,

packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactImagePath.ts

@@ -1,5 +1,7 @@
-import { renameImportPath } from '../sandboxUtils'
+const IMAGE_BY_INDEX_IMPORT_REGEX = /import(.*)from\s'..\/imageByIndex/
 
 export const createSandboxReactImagePath = (carouselScript: string): string => {
-  return renameImportPath(carouselScript, '../imageByIndex', './imageByIndex')
+  return carouselScript.replace(IMAGE_BY_INDEX_IMPORT_REGEX, (match) =>
+    match.replace('../', './'),
+  )
 }

packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactImages.ts

@@ -1,6 +1,7 @@
 import { SandboxLanguageType, SandboxModuleType } from '../sandboxTypes'
 import { isLanguageTypeScript } from '../sandboxUtils'
-import { SANDBOX_REGEX_IMAGE_IMPORT } from '../sandboxRegex'
+
+const IMAGE_BY_INDEX_IMPORT_REGEX = /import(.*)from\s'assets/g
 
 export const createSandboxReactImages = async (
   language: SandboxLanguageType,
@@ -17,6 +18,7 @@ export const createSandboxReactImages = async (
       '!!raw-loader!components/CodeSandbox/React/SandboxFilesDist/imageByIndex.js'
     )
   }
-
-  return imageByIndex.default.replace(SANDBOX_REGEX_IMAGE_IMPORT, '..')
+  return imageByIndex.default.replace(IMAGE_BY_INDEX_IMPORT_REGEX, (match) =>
+    match.replace('assets', '..'),
+  )
 }

packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactIndexHtml.ts

@@ -1,7 +1,7 @@
 import { THEME_PREFIX } from 'consts/themes'
 import { getThemeFromDocument } from 'utils/getThemeFromDocument'
 import { kebabCaseToPascalCase } from 'utils/kebabCaseToPascalCase'
-import { SANDBOX_REGEX_THEME, SANDBOX_REGEX_TITLE } from '../sandboxRegex'
+import { SANDBOX_REGEX_THEME, SANDBOX_REGEX_TITLE } from '../sandboxUtils'
 
 export const createSandboxReactIndexHtml = async (
   id: string,

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaEntry.ts

@@ -5,12 +5,13 @@ import { getThemeFromDocument } from 'utils/getThemeFromDocument'
 import { kebabCaseToPascalCase } from 'utils/kebabCaseToPascalCase'
 import { SandboxVanillaExtensionType } from '../sandboxTypes'
 import {
-  SANDBOX_REGEX_CODE,
-  SANDBOX_REGEX_SCRIPT_SRC,
-  SANDBOX_REGEX_REPOSITORY_URL,
   SANDBOX_REGEX_THEME,
   SANDBOX_REGEX_TITLE,
-} from '../sandboxRegex'
+  SANDBOX_REGEX_REPOSITORY_URL,
+} from '../sandboxUtils'
+
+const SANDBOX_SCRIPT_SRC_REGEX = /__replace_sandbox_script_src__/g
+const SANDBOX_CODE_REGEX = /__replace_sandbox_code__/g
 
 export const createSandboxVanillaEntry = async (
   id: string,
@@ -26,7 +27,7 @@ export const createSandboxVanillaEntry = async (
   return indexHTML.default
     .replace(SANDBOX_REGEX_THEME, theme)
     .replace(SANDBOX_REGEX_TITLE, title)
-    .replace(SANDBOX_REGEX_SCRIPT_SRC, scriptSrc)
+    .replace(SANDBOX_SCRIPT_SRC_REGEX, scriptSrc)
     .replace(SANDBOX_REGEX_REPOSITORY_URL, URLS.GITHUB_ROOT)
-    .replace(SANDBOX_REGEX_CODE, carouselHtml)
+    .replace(SANDBOX_CODE_REGEX, carouselHtml)
 }

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaImagePaths.ts

@@ -1,12 +1,13 @@
 import { SANDBOX_VANILLA_FOLDERS } from './sandboxVanillaFolders'
 
-const REMOVE_IMAGE_HASH_REGEX = /(?<=slide-\d)(.*?)(?=.jpg)/g
-const REWRITE_IMAGE_PATH_REGEX = /\/static\//g
+const IMG_SRC_WITH_HASH_REGEX = /\/static\/slide-\d{1,}-.+?\./g
+const IMG_SLIDE_WITH_NUMBER_REGEX = /slide-\d{1,}/
 
 export const createSandboxVanillaImagePaths = (
   carouselHtml: string,
 ): string => {
-  return carouselHtml
-    .replace(REMOVE_IMAGE_HASH_REGEX, '')
-    .replace(REWRITE_IMAGE_PATH_REGEX, `${SANDBOX_VANILLA_FOLDERS.IMAGES}/`)
+  return carouselHtml.replace(IMG_SRC_WITH_HASH_REGEX, (match) => {
+    const slideWithNumber = match.match(IMG_SLIDE_WITH_NUMBER_REGEX) || []
+    return `${SANDBOX_VANILLA_FOLDERS.IMAGES}/${slideWithNumber}.`
+  })
 }

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaOptions.ts

@@ -1,15 +1,17 @@
 import { EmblaOptionsType } from 'embla-carousel-react'
 import {
+  injectSandboxIosPickerLoop,
+  injectSandboxOptions,
   SANDBOX_REGEX_IOS_PICKER_LOOP,
   SANDBOX_REGEX_OPTIONS,
-} from '../sandboxRegex'
+} from '../sandboxUtils'
 
 export const createSandboxVanillaOptions = (
   carouselScript: string,
   options: EmblaOptionsType,
 ): string => {
-  const iosPickerLoop = options?.loop || false
+  const loop = options?.loop
   return carouselScript
-    .replace(SANDBOX_REGEX_OPTIONS, JSON.stringify(options))
-    .replace(SANDBOX_REGEX_IOS_PICKER_LOOP, iosPickerLoop.toString())
+    .replace(SANDBOX_REGEX_OPTIONS, injectSandboxOptions(options))
+    .replace(SANDBOX_REGEX_IOS_PICKER_LOOP, injectSandboxIosPickerLoop(loop))
 }

packages/embla-carousel-docs/src/components/CodeSandbox/sandboxUtils.ts

@@ -1,9 +1,21 @@
+import { EmblaOptionsType } from 'embla-carousel-react'
 import {
   SandboxLanguageType,
   SandboxReactExtensionType,
   SandboxVanillaExtensionType,
 } from './sandboxTypes'
 
+export const SANDBOX_REGEX_REPOSITORY_URL =
+  /__replace_sandbox_repository_url__/g
+
+export const SANDBOX_REGEX_TITLE = /__replace_sandbox_title__/g
+
+export const SANDBOX_REGEX_THEME = /__replace_sandbox_theme__/g
+
+export const SANDBOX_REGEX_OPTIONS = /const\sOPTIONS(.*)/
+
+export const SANDBOX_REGEX_IOS_PICKER_LOOP = /const\sLOOP\s=\sfalse/
+
 export const languageToReactExtension = (
   language: SandboxLanguageType,
 ): SandboxReactExtensionType => {
@@ -22,13 +34,14 @@ export const isLanguageTypeScript = (
   return language === 'typescript'
 }
 
-export const renameImportPath = (
-  rawFile: string,
-  oldName: string,
-  newName: string,
-): string => {
-  return rawFile.replace(
-    new RegExp(`(?<=from\\s'|")(.*)${oldName}(?='|")`),
-    newName,
-  )
+export const injectSandboxOptions = (
+  options: EmblaOptionsType,
+): ((match: string) => string) => {
+  return (match: string) => match.replace('{}', JSON.stringify(options))
+}
+
+export const injectSandboxIosPickerLoop = (
+  loop: boolean = false,
+): ((match: string) => string) => {
+  return (match) => match.replace('false', loop.toString())
 }

packages/embla-carousel-docs/src/components/Hero/Brand.tsx

@@ -114,7 +114,7 @@ export const Brand = () => {
         </H1>
         <H2>{description}</H2>
         <CtaWrapper id={SKIP_TO_CONTENT_ID}>
-          <PrimaryButtonLink to="/examples/basic/">
+          <PrimaryButtonLink to="/examples/static/">
             Try Examples
           </PrimaryButtonLink>
         </CtaWrapper>

packages/embla-carousel-docs/src/content/pages/get-started/cdn.md

@@ -40,6 +40,7 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov
 }
 .embla__slide {
   flex: 0 0 100%;
+  min-width: 0;
 }
 ```
 

packages/embla-carousel-docs/src/content/pages/get-started/module.md

@@ -40,6 +40,7 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov
 }
 .embla__slide {
   flex: 0 0 100%;
+  min-width: 0;
 }
 ```
 

packages/embla-carousel-docs/src/content/pages/get-started/react.md

@@ -49,6 +49,7 @@ The hook gives us a **ref** to attach to our wrapping element with the classname
 }
 .embla__slide {
   flex: 0 0 100%;
+  min-width: 0;
 }
 ```
 

packages/embla-carousel-docs/src/content/pages/get-started/svelte.md

@@ -43,6 +43,7 @@ The element with the classname `embla` is needed to cover the scroll overflow. I
   }
   .embla__slide {
     flex: 0 0 100%;
+    min-width: 0;
   }
 </style>
 ```

packages/embla-carousel-docs/src/content/pages/get-started/vue.md

@@ -54,6 +54,7 @@ The `emblaCarouselVue` function gives us an **emblaNode** to attach to our wrapp
   }
   .embla__slide {
     flex: 0 0 100%;
+    min-width: 0;
   }
 </style>
 ```

packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md

@@ -22,6 +22,7 @@ Slide sizes should in most cases be **declared with CSS**. Embla Carousel **supp
 ```css
 .embla__slide {
   flex: 0 0 50%; /* Slide covers 50% of the viewport */
+  min-width: 0;
 }
 ```
 
@@ -30,6 +31,7 @@ You can also declare your slide sizes using any other CSS unit like so:
 ```css
 .embla__slide {
   flex: 0 0 200px; /* Slide covers 200px of the viewport */
+  min-width: 0;
 }
 ```
 
@@ -40,9 +42,11 @@ Variable slide sizes is also **supported out of the box**. Declare your slide si
 ```css
 .embla__slide:nth-child(1) {
   flex: 0 0 30%; /* Slide covers 30% of the viewport */
+  min-width: 0;
 }
 .embla__slide:nth-child(2) {
   flex: 0 0 60%; /* Slide covers 60% of the viewport */
+  min-width: 0;
 }
 ```
 
@@ -51,6 +55,7 @@ If you're letting your slide sizes adapt to their content, make sure that the **
 ```css
 .embla__slide {
   flex: 0 0 auto; /* Adapt slide size to its content */
+  min-width: 0;
   max-width: 100%; /* Prevent from growing larger than viewport */
 }
 ```
@@ -62,6 +67,7 @@ Embla Carousel will **automatically pick up** any **changes in slide sizes** whe
 ```css
 .embla__slide {
   flex: 0 0 100%; /* Default slide covers 100% of the viewport */
+  min-width: 0;
 }
 @media (min-width: 768px) {
   .embla__slide {

packages/embla-carousel-react/README.md

@@ -38,7 +38,7 @@
 
   <p align="center">
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
     </strong>
   </p>
 </div>

packages/embla-carousel-svelte/README.md

@@ -38,7 +38,7 @@
 
   <p align="center">
     <strong>
-      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/basic/">Examples</a>&nbsp;</code>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/static/">Examples</a>&nbsp;</code>
     </strong>
   </p>
 </div>