@turnipxenon/pineapple 3.1.0-alpha.2 → 3.1.0-alpha.4

package/README.md

@@ -27,7 +27,12 @@ You can preview the production build with `yarn preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
 
-## Installing as a package
+
+## Installation as a package
+
+TODO: If you're curious how to install this on a fresh package or a package not using Skeleton, you can ask me to document the steps but I haven't explored that since I'm focused in migrating my projects. It should just be installing Skeleton v3 and then seeing the steps below.
+
+## Migration from v2 to v3
 
 ```bash
 yarn add @turnipxenon2/pineapple
@@ -37,20 +42,23 @@ yarn add @turnipxenon2/pineapple
 
 We still have to do some manual set up to our project to make it work.
 
-1. **Configure Tailwind.** Open your global stylesheet in `/src/app.css` and add the following imports:
+1. Follow these steps here: https://www.skeleton.dev/docs/get-started/migrate-from-v2
+
+2. **Configure Tailwind.** Open your global stylesheet in `/src/styles/app.css` and add the following imports:
 
 ```css
 @import 'tailwindcss';
-@import '@skeletonlabs/skeleton/optional/presets';
-@import '@skeletonlabs/skeleton';
-@import '@skeletonlabs/skeleton/themes/cerberus';
-@import '../node_modules/@turnipxenon/pineapple/dist/styles/app.css';
+@import "@skeletonlabs/skeleton";
+@import "@skeletonlabs/skeleton/optional/presets";
+@import "@skeletonlabs/skeleton/themes/legacy";
+@import '../../../node_modules/@turnipxenon/pineapple/dist/styles/app.css';
+@import '../../../node_modules/@turnipxenon/pineapple/dist/styles/turnip-theme.css';
+
+@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
+@source '../../../node_modules/@turnipxenon/pineapple/dist/';
 
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
-
-@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
-@source '../node_modules/@turnipxenon/pineapple/dist/styles'
 ```
 
 2. **Set Active Theme.** Open /src/app.html, then set the data-theme attribute on the HTML tag to define the active theme.

package/dist/components/RandomizedBackground.svelte

@@ -1,3 +1,7 @@
+<!--
+    @component
+    @deprecated
+-->
 <script lang="ts">
 	import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
 	import BgTiledCorn from "../assets/bg_tiled/bg_tiled_corn.png";

package/dist/components/RandomizedBackground.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     enable: any;
 }
+/** @deprecated */
 declare const RandomizedBackground: import("svelte").Component<Props, {}, "">;
 type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
 export default RandomizedBackground;

package/dist/components/dialog_manager/DialogManager.d.ts

@@ -15,7 +15,7 @@ export declare class DialogManager implements IDialogManager {
     currentIndex: number;
     previousTimestamp: number;
     isDoneTransition: boolean;
-    currentPortrait: import("svelte/store").Writable<unknown>;
+    currentPortrait: import("svelte/store").Writable<string>;
     portraitMap: Map<string, any>;
     currentState: DialogState;
     currentReadableState: import("svelte/store").Writable<DialogState>;

package/dist/components/dialog_manager/DialogManager.js

@@ -28,7 +28,7 @@ export class DialogManager {
     currentIndex = 0;
     previousTimestamp = 0;
     isDoneTransition = false;
-    currentPortrait = writable();
+    currentPortrait = writable("");
     portraitMap = new Map();
     currentState = DialogState.Visible;
     currentReadableState = writable(this.currentState);

package/dist/components/dialog_manager/DialogMangerInit.d.ts

@@ -1,2 +1,2 @@
 import type { IDialogManager } from "./IDialogManager";
-export declare const getDialogManager: () => Promise<IDialogManager | undefined>;
+export declare const getDialogManager: () => Promise<IDialogManager>;

package/dist/components/dialog_manager/index.d.ts

@@ -0,0 +1 @@
+export * from "./DialogMangerInit";

package/dist/components/dialog_manager/index.js

@@ -0,0 +1 @@
+export * from "./DialogMangerInit";

package/dist/scripts/pineapple_fiber/PineappleWeaver.js

@@ -44,8 +44,7 @@ const pineappleWeaverRun = () => {
         const template = `// this file was generated by PineappleWeaver.ts
 // do not edit!
 			
-import type { DialogDetail } from "@turnipxenon/pineapple";
-import { dialogManager, PortraitType } from "@turnipxenon/pineapple";
+import { type DialogDetail, getDialogManager, PortraitType } from "@turnipxenon/pineapple";
 
 class _${fileName}Yarn {
 	dialogList: DialogDetail[] = [
@@ -54,7 +53,7 @@ ${dialogDetailListToString(dialogDetailList)}
 	
 	/* Remember to call DialogManager.subscribeToSetDialogChoice before calling this in Svelte */
 	setDialogTree = () => {
-		dialogManager.setDialogTree(this.dialogList);
+		getDialogManager().then((dm) => dm?.setDialogTree(this.dialogList));
 	};
 }
 

package/dist/ui/components/randomized-background/RandomizedBackground.svelte

@@ -9,7 +9,7 @@
 	import BgTiledTurnip from '../../../assets/bg_tiled/bg_tiled_turnip.png';
 	import RandomizedImage from './RandomizedImage.svelte';
 	import { generatedDailySeed, mulberry32Generator } from '../../../util/util';
-	import { appState } from "../../templates/index";
+	import { appState } from "../../templates/PinyaPageLayout/runes.svelte";
 
 	let { enabled }: {
 		enabled: boolean

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "3.1.0-alpha.2",
+  "version": "3.1.0-alpha.4",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",