@candidosales/svelte-google-translate 0.0.3 → 0.0.4

package/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

package/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

package/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package/package.json

@@ -1,48 +1,56 @@
 {
-  "name": "@candidosales/svelte-google-translate",
-  "description": "Google Translate component for Svelte",
-  "version": "0.0.3",
-  "author": {
-    "email": "candidosg@gmail.com",
-    "name": "Cândido Sales Gomes"
-  },
-  "main": "index.js",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./package/index.d.ts",
-      "svelte": "./package/index.js"
-    },
-    "./GoogleTranslate.svelte": "./GoogleTranslate.svelte"
-  },
-  "keywords": [
-    "svelte",
-    "sveltekit",
-    "google-translate"
-  ],
-  "dependencies": {
-    "svelte": "^3.54.0"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.0-next.90",
-    "@sveltejs/kit": "next",
-    "@sveltejs/package": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
-    "svelte-check": "^2.9.2",
-    "svelte2tsx": "^0.6.9",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
-  },
-  "type": "module",
-  "bugs": {
-    "url": "https://github.com/candidosales/svelte-google-translate/issues"
-  },
-  "license": "MIT"
-}
+	"name": "@candidosales/svelte-google-translate",
+	"description": "Google Translate component for Svelte",
+	"version": "0.0.4",
+	"author": {
+		"email": "candidosg@gmail.com",
+		"name": "Cândido Sales Gomes"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"preview": "vite preview",
+		"build": "vite build && svelte-kit sync && svelte-package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"package": "svelte-package"
+	},
+	"main": "index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"google-translate"
+	],
+	"dependencies": {
+		"svelte": "^3.56.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "next",
+		"@sveltejs/package": "^2.0.2",
+		"@typescript-eslint/eslint-plugin": "^5.55.0",
+		"@typescript-eslint/parser": "^5.55.0",
+		"eslint": "^8.36.0",
+		"eslint-config-prettier": "^8.7.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^2.8.4",
+		"prettier-plugin-svelte": "^2.9.0",
+		"svelte-check": "^3.1.4",
+		"svelte2tsx": "^0.6.9",
+		"tslib": "^2.5.0",
+		"typescript": "^4.9.5",
+		"vite": "^4.1.4"
+	},
+	"type": "module",
+	"bugs": {
+		"url": "https://github.com/candidosales/svelte-google-translate/issues"
+	},
+	"license": "MIT"
+}

package/src/app.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}

package/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>

package/src/lib/GoogleTranslate.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	type InlineLayout = 'horizontal' | 'vertical' | 'dropdown';
+	type FloatPosition = 'TOP_LEFT' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_RIGHT';
+
+	/**
+	 * Interface for a TranslateElementOptions object.
+	 */
+	interface TranslateElementOptions {
+		/**
+		 * This option specifies the language of the page that you want to translate. The default value is "auto", which means that Google will detect the language automatically.
+		 */
+		pageLanguage?: string;
+		/**
+		 * This option is an array of language codes that you want to include in the language selector. If you don't specify this option, Google will include all languages that are supported by the API.
+		 * Supported languages: https://cloud.google.com/translate/docs/languages
+		 */
+		includedLanguages?: string;
+		/**
+		 * This option specifies the layout of the language selector. The default value is "horizontal", which displays the language names in a row. Other options include "vertical" (displays the language names in a column) and "dropdown" (displays the language names in a dropdown menu).
+		 */
+		layout?: InlineLayout;
+		/**
+		 * This option specifies whether or not to display the language selector automatically. The default value is true.
+		 */
+		autoDisplay?: boolean;
+		/**
+		 * This option specifies whether or not the page being translated contains multiple languages. The default value is false.
+		 */
+		multilanguagePage?: boolean;
+		/**
+		 * This option specifies whether or not to track translation events using Google Analytics. The default value is false.
+		 */
+		gaTrack?: boolean;
+		/**
+		 * This option specifies the Google Analytics tracking ID to use if gaTrack is set to true.
+		 */
+		gaId?: string;
+		/**
+		 * This option specifies whether to use a compact layout for the language selector. The default value is false.
+		 */
+		layoutCompact?: boolean;
+		/**
+		 * This option specifies the position of the language selector if layoutCompact is set to true. The default value is "TOP_LEFT", other options include "TOP_RIGHT", "BOTTOM_LEFT", and "BOTTOM_RIGHT".
+		 */
+		floatPosition?: FloatPosition;
+		/**
+		 * This option specifies the time in milliseconds before the API returns an error if it fails to load. The default value is 5000.
+		 */
+		timeout?: number;
+		/**
+		 * This option specifies whether to use the new version of the Google Translate API. The default value is false.
+		 */
+		newVersion?: boolean;
+		/**
+		 * This option specifies whether to display the "Powered by Google Translate" attribution. The default value is true.
+		 */
+		attribution?: boolean;
+	}
+
+	export let elementId: HTMLElement | string = 'google-translate-element';
+
+	export let options: TranslateElementOptions = {
+		pageLanguage: 'pt',
+		includedLanguages: 'pt,en,es,fr,nl,ja,zh-CN',
+		autoDisplay: false
+	};
+	onMount(() => {
+		googleTranslateInit();
+	});
+
+	function googleTranslateInit() {
+		setTimeout(function () {
+			if (
+				typeof google !== 'undefined' &&
+				google != null &&
+				google.translate != null &&
+				google.translate.TranslateElement != null
+			) {
+				new google.translate.TranslateElement(options, elementId);
+			}
+		}, 300);
+	}
+</script>
+
+<svelte:head>
+	<script async src="https://translate.google.com/translate_a/element.js"></script>
+</svelte:head>

package/src/lib/index.js

@@ -0,0 +1,2 @@
+// Reexport your entry components here
+export { default as GoogleTranslate } from './GoogleTranslate.svelte';

package/src/routes/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+	import GoogleTranslate from '$lib/GoogleTranslate.svelte';
+</script>
+
+<h1>Svelte Google Translate</h1>
+<GoogleTranslate
+	elementId="google-translate-element"
+	options={{ pageLanguage: 'pt', includedLanguages: 'pt,en' }}
+/>
+<div id="google-translate-element">
+	<p>Test</p>
+</div>

package/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/vite.config.js

@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;